/***********
*************** FILTER CHIPS
*****************************************/

/*************************************************************         FILTERS GROUP WRAPPER          ********************/

/* #region FILTERS WRAPPER */

.filters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}



/* #endregion FILTERS WRAPPER */


/*************************************************************         FILTER CHIPS SHELL          ********************/

/* #region FILTER CHIPS SHELL */

/*==========================================================================
|                            CHIP INACTIVE                                 |
==========================================================================*/

.chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  cursor: pointer;
  font-weight: 650;
}

/*==========================================================================
|                            CHIP ON MOUSE HOVER                           |
==========================================================================*/

.chip.is-active{
  color: var(--text);
  border-color: var(--accentLine);
  background: var(--accentSoft);
}



/* #endregion FILTER CHIPS SHELL */


/*************************************************************         FILTER DROPDOWNS          ********************/

/* #region FILTER DROPDOWNS */

.catalogue-filters{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-select{
  appearance: none;
  padding: 10px 36px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, color 150ms ease;
  min-width: 160px;
}

.filter-select:focus,
.filter-select:hover{
  border-color: rgba(241,160,36,0.5);
  color: var(--text);
}

.filter-select option{
  background: #111318;
  color: var(--text);
}

/* #endregion FILTER DROPDOWNS */