@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * SEARCH BAR
 */
.searchbar-result del {
  @apply block text-sm text-red-600;
}
.searchbar-result ins {
  text-decoration: none;
}
.searchbar-result img {
  @apply h-10;
}
.searchbar-result .woocommerce-Price-currencySymbol {
  @apply text-xs text-gray-600;
  text-decoration-line: none;
}

/**
 * ANIMATED UNDERLINE ON HOVER
 */
:root {
  --underlined-color: #d90000;
}

.underlined {
  position: relative;
  white-space: nowrap;
}

.underlined,
.underlined:focus {
  text-decoration: none !important;
}

.underlined:focus {
  outline: none;
}

.underlined:after {
  content: "";
  height: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  border-radius: 12px;
  position: absolute;
  transition: all 0.15s cubic-bezier(0.28, 0.12, 0.22, 1);
}

.active.underlined:after,
.underlined:focus:after,
.underlined:hover:after {
  background-color: var(--underlined-color, #ffcc00);
  width: 100%;
}

@media (prefers-reduced-motion) {
  .underlined:after {
    opacity: 0;
  }

  .active.underlined:after,
  .underlined:focus:after,
  .underlined:hover:after {
    opacity: 1;
  }
}

@layer components {
  /*
    .custom-class {
        @apply ...;
    }
    */
}

/**
 * Slider
 */
.range-slider-input {
  @apply my-2 h-2 rounded border border-gray-200/80 bg-white;
}

.range-slider-input-thumb {
  @apply -mt-1.5 h-5 w-4 rounded-sm border border-gray-400 bg-gray-300 shadow ring-0 focus:outline-none focus:ring-0;
}

.range-slider-input-thumb:before {
  @apply absolute ml-1 mt-1 h-2.5 w-1.5 border-x border-gray-400 content-[""] focus:border-gray-600;
}

.range-slider-input-track {
  @apply h-2;
}

.range-slider-input-track-1 {
  @apply bg-red-500;
}

/**
 * Premium
 */
label.for-radio input:checked + .when-checked {
  display: block;
}

.premium-header-icons svg {
  color: white!important;
}