@use '../../tools/colors';

@use '../config/font-size.scss';
@use '../config/spacing.scss';
@use '../config/speed.scss';
@use '../config/variables.scss';

.context-menu {
  font-size: font-size.$font-size--small;
  height: 100vh;
  left: 0;
  width: 100vw;
  position: absolute;
  top: 0;

  &--enter {
    .context-menu {
      &__items {
        opacity: 0;
        transform: translateY(2rem * -1);

        &--is-up {
          transform: translateY(2rem);
        }
      }
    }

    &--active {
      .context-menu {
        &__items {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }

  &--exit {
    .context-menu {
      &__items {
        opacity: 1;
        transform: translateY(0);
      }
    }

    &--active {
      .context-menu {
        &__items {
          opacity: 0;
          transform: translateY(20px * -1);

          &--is-up {
            transform: translateY(20px);
          }
        }
      }
    }
  }

  &__items {
    background: colors.$white;
    border-radius: variables.$form--element--border-radius;
    box-shadow: form--element--box-shadow(colors.$darkest-grey, 0.05, 0.1), 0 0 0 1px rgba(colors.$darkest-grey, 0.1);
    max-width: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    transform-origin: 50% -5px;
    transition: opacity speed.$speed--xx-fast, transform speed.$speed--xx-fast;
    z-index: 101;

    &,
    &__padding-surrogate {
      padding: spacing.$spacing--small 0;
    }

    &--is-up {
      transform-origin: 50% calc(100% + 5px);
    }

    &--match-trigger-width {
      max-width: none;
    }

    &--no-padding {
      padding: 0;
    }

    &--no-scrolling {
      overflow: hidden;
    }
  }
}
