@use 'sass:math';
@use 'vars' as *;
@use 'mixins' as *;

#toggle-settings-container,
#settings-container {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  right: 0;
  font-size: 0;
}

#toggle-settings-container {
  padding: $medium-padding;

  cursor: pointer;

  padding: $medium-padding $medium-padding 0 $medium-padding;
  @media (max-width: $breakpoint) {
    padding: $medium-padding $medium-padding $medium-padding 0;
  }

  #toggle-settings {
    animation: spin 32s linear infinite;

    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }

    @include square($large-icon);
    @media (max-width: $breakpoint) {
      @include square($small-icon);
    }
  }
}

#settings-container {
  top: $medium-padding + $large-icon + $small-padding;
  @media (max-width: $breakpoint) {
    top: 0;
    right: $medium-padding + $small-icon + $small-padding;
  }
  pointer-events: none;
  overflow: hidden;
}

#settings {
  display: flex;
  flex-direction: column;
  @include background;
  border-radius: 12px;
  z-index: 100;
  margin-right: $medium-padding - $small-padding;
  padding: $small-padding;

  transform: translateY(-100%);
  @media (max-width: $breakpoint) {
    flex-direction: row-reverse;
    transform: translateX(100%);
    margin-top: $medium-padding - $small-padding;
    margin-right: 0;
  }

  opacity: 0;
  transition: transform $animation-time, opacity $animation-time;

  &.open {
    transform: none;
    opacity: 1;
    pointer-events: all;
  }

  img,
  svg {
    cursor: pointer;
    transition: opacity $animation-time;
    @include square($large-icon);
    @media (max-width: $breakpoint) {
      @include square($small-icon);
    }
  }

  label {
    position: relative;

    input[type='checkbox'] {
      width: 0;
      height: 0;
      appearance: none;
      cursor: pointer;

      &:not(:checked) + * {
        opacity: 0.4;
      }

      &:focus {
        outline: none;
      }

      &:after {
        content: '';
        background: white;
        position: absolute;

        $height: 4px;
        width: $height;
        top: math.div($height, 2);

        right: 0;
        transform-origin: top right;
        border-radius: 100px;
        height: 0;
        transform: rotate(45deg) translateY(17%);
        transition: height $animation-time;

        @media (max-width: $breakpoint) {
          $height: 2px;
          width: $height;
          top: math.div($height, 2);
        }
      }

      &:not(:checked):after {
        height: $large-icon;
        @media (max-width: $breakpoint) {
          height: $small-icon;
        }
      }
    }
  }

  img,
  svg {
    margin-top: $small-padding;
    @media (max-width: $breakpoint) {
      margin-top: 0;
      margin-right: $small-padding;
    }
  }

  label:first-child {
    img,
    svg {
      margin-top: 0;
      margin-right: 0;
    }
  }

  label:not(:first-child) {
    input[type='checkbox']:after {
      $height: 4px;
      top: math.div($height, 2) + $small-padding;

      @media (max-width: $breakpoint) {
        right: $small-padding;
        top: math.div($height, 2);
      }
    }
  }
}
