@layer components {
  .input-range-container {
    @apply relative;
    background-color: var(--color-pearl);
    @apply grid;

    --diff: calc(var(--max) - var(--min));
    --tickmarkWidth: 2px;

    grid-template: repeat(2, max-content) var(--inputHeight) / 1fr 1fr;
    width: var(--inputWidth);
    background-image: repeating-linear-gradient(
      90deg,
      var(--color-middleGrey),
      var(--color-middleGrey) var(--tickmarkWidth),
      var(--color-pearl) 0,
      var(--color-pearl) calc(((100% - var(--tickmarkWidth)) / var(--max)))
    );
  }

  .input-range-container::before,
  .input-range-container::after {
    background-color: var(--color-saffron);

    grid-column: 1 / span 2;
    grid-row: 3;
    content: '';
  }

  html:not(.rtl) .input-range-container::before {
    margin-left: calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));
    width: calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth));
  }

  html:not(.rtl) .input-range-container::after {
    margin-left: calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));
    width: calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth));
  }

  .rtl .input-range-container::before {
    margin-right: calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));
    width: calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth));
  }

  .rtl .input-range-container::after {
    margin-right: calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));
    width: calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth));
  }

  .input-range {
    @apply z-1;
    @apply top-0;
    @apply left-0;
    @apply m-0;
    @apply pointer-events-none;
    @apply appearance-none;

    grid-column: 1 / span 2;
    grid-row: 3;
    background: none;
    --col: #000;
  }

  .input-range-sliderThumb {
    @apply transform;
    @apply appearance-none;
    @apply border-0;

    pointer-events: auto;
    width: var(--thumbWidth);
    height: var(--thumbWidth);
    cursor: ew-resize;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");
    transition: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-duration: 250ms;
  }

  .input-range::-webkit-slider-thumb {
    transform: var(--tw-transform);
    appearance: none;
    border: 0;
    pointer-events: auto;
    width: var(--thumbWidth);
    height: var(--thumbWidth);
    cursor: ew-resize;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");
    transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
  }

  .input-range::-webkit-slider-thumb:hover {
    @apply scale-105;
  }

  .input-range::-moz-range-thumb {
    transform: var(--tw-transform);
    appearance: none;
    border: 0;
    pointer-events: auto;
    width: var(--thumbWidth);
    height: var(--thumbWidth);
    cursor: ew-resize;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");
    transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
  }

  .input-range::-moz-range-thumb:hover {
    @apply scale-105;
  }

  .input-range::-ms-thumb {
    transform: var(--tw-transform);
    appearance: none;
    border: 0;
    pointer-events: auto;
    width: var(--thumbWidth);
    height: var(--thumbWidth);
    cursor: ew-resize;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");
    transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
  }

  .input-range::-ms-thumb:hover {
    @apply scale-105;
  }

  .input-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .input-range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .input-range::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .input-range::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .input-range-output {
    margin-top: 20px;
    position: absolute;
    display: block;
    color: hsl(0deg 0% 0%);
    font-size: 0.75rem;
    line-height: 0.875rem;
    font-weight: 600;

    left: calc(0.5 * var(--thumbWidth));
  }

  html:not(.rtl) .input-range-output {
    transform: translateX(
      calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%)
    );
  }

  .rtl .input-range-output {
    transform: translateX(
      calc(
        (var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) -
          50%
      )
    );
  }
}
