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

body {
  background-color: #f3f3f2;
}

html {
}

.font-usual {
  font-family: "Usual", sans-serif;
}

.font-mixcase {
  font-family: "Mixcase", sans-serif;
}

@layer components {
  .desc-shadow {
    box-shadow: 0px 4px 20px 1px #00000026;
  }

  .text-caption-s {
    font-family: "Usual", sans-serif;
    font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
    line-height: 135%;
  }

  .text-caption-m {
    font-family: "Usual", sans-serif;
    line-height: 135%;
    font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
  }

  .text-s {
    font-family: "Usual", sans-serif;
    line-height: 140%;
    font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
  }

  .text-m {
    font-family: "Usual", sans-serif;
    line-height: 125%;
    font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
  }

  .text-subheadline-s {
    font-family: "Usual", sans-serif;
    line-height: 140%;
    font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
  }

  .text-subheadline-m {
    font-family: "Usual", sans-serif;
    font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
    line-height: 135%;
  }

  .text-subheadline-l {
    font-family: "Usual", sans-serif;
    font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
    line-height: 135%;
  }

  .text-headline-s {
    font-family: "Mixcase", sans-serif;
    line-height: 100%;
    letter-spacing: -0.03em;
    font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
  }

  .text-button-m {
  }

  .mobile-text-s {
    font-family: "Usual", sans-serif;
    line-height: 140%;
    font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
  }

  .mobile-subheadline-m {
  }

  .rubber-headline-indent {
    text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
  }

  .left-slider-btn-offset {
    left: clamp(230px, 0.5927rem + 17.2144vw, 370px);
  }

  .left-solution-slider-btn-offset {
    left: clamp(230px, 0.3927rem + 15.5144vw, 370px);
  }

  .slider {
    position: relative;
  }

  .slider__track,
  .slider__range {
    border-radius: 3px;
    height: 5px;
    position: absolute;
  }

  .slider__track {
    background-color: #000;
    width: 100%;
    z-index: 1;
  }

  .slider__range {
    background-color: #9fe5e1;
    z-index: 2;
  }

  /* Removing the default appearance */
  .thumb,
  .thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .thumb {
    pointer-events: none;
    position: absolute;
    height: 0;
    width: 200px;
    outline: none;
  }

  .thumb--zindex-3 {
    z-index: 3;
  }

  .thumb--zindex-4 {
    z-index: 4;
  }

  /* For Chrome browsers */
  .thumb::-webkit-slider-thumb {
    background-color: #f1f5f7;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px #ced4da;
    cursor: pointer;
    height: 18px;
    width: 18px;
    margin-top: 4px;
    pointer-events: all;
    position: relative;
  }

  /* For Firefox browsers */
  .thumb::-moz-range-thumb {
    background-color: #f1f5f7;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px #ced4da;
    cursor: pointer;
    height: 18px;
    width: 18px;
    margin-top: 4px;
    pointer-events: all;
    position: relative;
  }

  .slider__left-value,
  .slider__right-value {
    color: #dee2e6;
    font-size: 12px;
    margin-top: 20px;
    position: absolute;
  }

  .slider__left-value {
    left: 6px;
  }

  .slider__right-value {
    right: -4px;
  }

  input[type="number"].input_number {
    -moz-appearance: textfield;
  }

  input.input_number::-webkit-outer-spin-button,
  input.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* scrollbar */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #c7bdba;
  border-radius: 99px;
}

:fullscreen::backdrop {
  background: none;
}

body {
  scrollbar-color: #c7bdba;
  scrollbar-width: thin;
}