@use './shared' as *;
@use './design' as *;

.#{$namespace}-popup {
  // position: fixed;
  // z-index: value('z-index-popup');
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  font-size: value('font-size-base');

  &__item {
    position: fixed;
    z-index: value('z-index-popup');
    display: flex;
    // stylelint-disable-next-line declaration-property-value-disallowed-list
    transition: all value('transition-base');

    &-inner {
      position: relative;
    }
  }

  $item: #{&}__item;

  &--top-right,
  &--bottom-right {
    #{$item} {
      right: 24px;
    }
  }

  &--top-left,
  &--bottom-left {
    #{$item} {
      left: 24px;
    }
  }

  &--top-center,
  &--bottom-center {
    #{$item} {
      left: 50%;
      transform: translateX(-50%);
    }
  }
}