@import '../../common/style/press/ellipsis.scss';
@import '../../common/style/press/var.scss';

.press-dropdown-menu {
  display: flex;
  box-shadow: var(--dropdown-menu-box-shadow, $dropdown-menu-box-shadow);
  user-select: none;
  height: var(--dropdown-menu-height, $dropdown-menu-height);
  background-color: var(
    --dropdown-menu-background-color,
    $dropdown-menu-background-color
  );

  &__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0; // hack for flex ellipsis

    &:active {
      opacity: .7;
    }

    &--disabled {
      &:active {
        opacity: 1;
      }

      .press-dropdown-menu__title {
        color: var(
          --dropdown-menu-title-disabled-text-color,
          $dropdown-menu-title-disabled-text-color
        );
      }
    }
  }

  &__title {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--dropdown-menu-title-padding, $dropdown-menu-title-padding);
    color: var(
      --dropdown-menu-title-text-color,
      $dropdown-menu-title-text-color
    );
    font-size: var(
      --dropdown-menu-title-font-size,
      $dropdown-menu-title-font-size
    );
    line-height: var(
      --dropdown-menu-title-line-height,
      $dropdown-menu-title-line-height
    );

    &::after {
      position: absolute;
      top: 50%;
      right: -4px;
      margin-top: -5px;
      border: 3px solid;
      border-color: transparent transparent currentColor currentColor;
      transform: rotate(-45deg);
      opacity: .8;
      content: '';
    }

    &--active {
      color: var(
        --dropdown-menu-title-active-text-color,
        $dropdown-menu-title-active-text-color
      );
    }

    &--down {
      &::after {
        margin-top: -1px;
        transform: rotate(135deg);
      }
    }
  }
}