@import '../../../styles/core.scss';

.Dropdown {
  $B: #{&};

  & {
    position: relative;
  }

  &_justify {
    &\=left, &\=start {
      #{$B}-content { left: -1 * ms(-4) }
    }
    &\=center {
      #{$B}-content {
        left: 50%;
        transform: translateX(-50%);
      }
    }
    &\=right, &\=end {
      #{$B}-content { right: -1 * ms(-4) }
    }
  }
  &_align {
    &\=top, &\=start {
      #{$B}-content { top: 100% }
    }
    &\=center {
      #{$B}-content {
        top: 50%;
        transform: translateY(-50%);
      }
      &#{$B}_justify\=center #{$B}-content {
        transform: translate(-50%, -50%);
      }
    }
    &\=bottom, &\=end {
      #{$B}-content { bottom: 100% }
    }
  }

  &-toggle {
    user-select: none;
  }

  &-content {
    & {
      z-index: 10;
      position: absolute;
      width: max-content;
      max-width: 42em;
      margin: 0 -1*ms(-4);
      border: ms(-4) solid transparent;
      margin: 0;
      min-width: 100%;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    &_opened {
      opacity: 1;
      transform: none;
    }

    &_closed {
      opacity: 0;
      pointer-events: none;
    }
  }
}