@mixin thumb {
  appearance: none;
  inline-size: 4px;
  block-size: 100%;
  background-color: #000;
}

.juz-dualview {
  display: grid;

  > * {
    grid-area: 1 / 1;
  }

  &:hover,
  &:focus-within {

    > .juz-dualview__range[type="range"] {
      opacity: 1;
    }
  }

  :where(figure) {
    margin-block-end: 0;
  }

  & input:is(&__range[type="range"]) {
    z-index: 1;
    appearance: none;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 0;
    border: none;
    padding: 0;
    transition: opacity 0.2s ease-out;
    position: relative;
    overflow: hidden;

    &:before {
      content: "";
      display: block;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: var(--pos--juz-dualview, 50%);
      transform: translate(-50%, -50%);
      background-color: transparent;
      background-image: url("./assets/slider-icon.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 50px;
      z-index: -1;
    }

    &::-ms-thumb {
      @include thumb;
    }

    &::-moz-range-thumb {
      @include thumb;
    }

    &::-webkit-slider-thumb {
      @include thumb;
    }
  }

  > .juz-dualview__before {
    mask: linear-gradient(to right, #000 0, var(--pos--juz-dualview, 50%), transparent 0);
  }

  > .juz-dualview__after {
    mask: linear-gradient(to right, transparent 0, var(--pos--juz-dualview, 50%), #000 0);
  }

  &__description-text {
    margin-block: 0;
  }

  &__toolbar {

    &:not(:focus-within) {
      position: absolute !important;
      clip: rect(1px, 1px, 1px, 1px);
      overflow: hidden;
      height: 1px;
      width: 1px;
      word-wrap: normal;
    }

    &-description {
      position: absolute !important;
      clip: rect(1px, 1px, 1px, 1px);
      overflow: hidden;
      height: 1px;
      width: 1px;
      word-wrap: normal;
    }
  }
}