@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-dropdown {
  position: relative;

  &--inline {
    display: inline-block;
  }

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: $color-bg-mask;
    height: 100%;
    z-index: $zindex-popup;

    &-hidden {
      display: none;
    }
  }

  &-trigger-above {
    position: relative;
    z-index: $zindex-dropdown;
  }

  &-overlay {
    position: absolute;
    z-index: $zindex-dropdown;
    font-size: $font-size-lg;
    color: $color-text-base;
    background-color: $color-bg;
    border-radius: $border-radius-sm;
    overflow: hidden;

    &-hidden {
      display: none;
    }

    &.placement-bottom {
      top: 100%;
      left: 50%;
      transform: translate(-50%, 0);
    }

    &.placement-top {
      bottom: 100%;
      left: 50%;
      transform: translate(-50%, 0);
    }

    &.placement-bottomLeft {
      top: 100%;
      left: 0;
    }

    &.placement-bottomRight {
      top: 100%;
      right: 0;
    }

    &.placement-topLeft {
      bottom: 100%;
      left: 0;
    }

    &.placement-topRight {
      bottom: 100%;
      right: 0;
    }
  }
}