@use 'mixins' as *;
@use 'range-input' as *;

html > body > aside.control-dock > .pages {
  @include blurred-background(#fff);
  width: min(calc(100vw - 1rem), 560px);
  max-height: min(58vh, 520px);
  max-height: min(58dvh, 520px);
  margin: 0 auto 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 8px;
  box-shadow:
    0 18px 48px rgb(0 0 0 / 28%),
    0 2px 10px rgb(0 0 0 / 16%);
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) transparent;
  transition:
    max-height var(--transition-time-long),
    opacity var(--transition-time-long),
    transform var(--transition-time-long),
    margin-bottom var(--transition-time-long);

  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar {
    background-color: transparent;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 8px;
  }

  &:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
  }

  &.hidden {
    max-height: 0;
    margin-bottom: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transform: translateY(8px);
    visibility: hidden;
  }

  > section {
    display: flex;
    flex-direction: column;
    padding: var(--normal-margin);

    h1 {
      font-size: 2rem;
      line-height: 1.1;
    }

    p {
      @include main-font();
      margin-bottom: var(--small-margin);
      line-height: 1.65;
    }

    a {
      color: var(--accent-color);
    }

    .slider {
      $track-height: 8px;
      $thumb-size: 22px;
      margin-bottom: var(--small-margin);
      user-select: none;

      p {
        display: flex;
        justify-content: space-between;
        gap: var(--small-margin);
        margin-bottom: 0.35rem;
        font-size: 0.95rem;
      }

      input[type='range'] {
        @include settings-range-input();

        &::-webkit-slider-runnable-track {
          @include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
        }

        &::-webkit-slider-thumb {
          @include range-thumb-base(
            $thumb-size,
            $thumb-size,
            2px solid var(--accent-color),
            1000px
          );
          margin-top: -7px;
          appearance: none;
          background: white;
          box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
          transition: transform var(--transition-time);

          &:hover {
            transform: scale(1.08);
          }
        }

        &::-moz-range-track {
          @include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
        }

        &::-moz-range-thumb {
          @include range-thumb-base(
            $thumb-size,
            $thumb-size,
            2px solid var(--accent-color),
            1000px
          );
          background: white;
          box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
        }
      }
    }

    .large-button {
      margin: var(--small-margin) 0 0 auto;
      border-radius: 8px;
    }
  }

  @include on-small-screen {
    max-height: min(54vh, 500px);
    max-height: min(54dvh, 500px);

    > section {
      padding: var(--small-margin);
    }
  }
}