section{
  transition: height 600ms;
  transition-timing-function: ease-in-out;
}

#th-filter-select{
  &:hover{
    .order-switch{
      background-color: var(--ion-color-step-200);
      #up, #down{ opacity: 1 !important; color: var(--ion-color-step-700) !important }
    }
  }
  .order-switch{
    #up, #down{ opacity: 0; transition: all 300ms; }
    transition: background-color 300ms;
    &.ordering-asc{
      #up  { color: var(--ion-color-primary)  !important; opacity: 1; }
      #down{ color: var(--ion-color-step-800) !important; opacity: 1; }
    }
    &.ordering-desc{
      #up  { color: var(--ion-color-step-800) !important; opacity: 1; }
      #down{ color: var(--ion-color-primary)  !important; opacity: 1; }
    }
  }
}

.unique-conteiner{
  @apply min-h-10 w-full top-10 px-3 text-center my-10 absolute z-30 flex items-center justify-center translate-y-0;
}

#wrapper{
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
}