@use '../theme/palette.tokens' as palette;
@use '../theme/shadows.tokens' as shadows;
@use '../theme/spacing.tokens' as spacing;
@use '../theme/menu.tokens' as menu;

.pa-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0 menu.$padding-menu-option-side;

  &:not(.pa-option-with-description) .pa-option-content {
    padding: menu.$padding-menu-option-top 0;
  }

  &.pa-option-with-description {
    padding: spacing.rhythm(1) menu.$padding-menu-option-side;
  }

  .pa-option-text-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 100%;

    &.smaller-wrapper {
      flex: 1;
      max-width: calc(100% - #{spacing.rhythm(4)});
    }
  }

  .pa-option-description {
    color: palette.$color-neutral-regular;
  }

  &[hidden] {
    display: none;
  }
  &:not(.pa-option-disabled):not(.pa-option-readonly) {
    &:hover {
      background-color: menu.$color-background-menu-option-hover;

      &.pa-option-destructive {
        background-color: menu.$color-background-menu-option-destructive-hover;
      }
    }
    &:active {
      background-color: menu.$color-background-menu-option-active;

      &.pa-option-destructive {
        background-color: menu.$color-background-menu-option-destructive-active;
      }
    }
    &.pa-option-selected {
      background-color: menu.$color-background-menu-option-selected;
    }
    &.pa-keyboard-focus {
      box-shadow: unset;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        right: spacing.rhythm(0.25);
        left: spacing.rhythm(0.25);
        height: 100%;
        box-shadow: shadows.$shadow-focus;
      }
    }
  }

  &.pa-option-destructive {
    color: menu.$color-text-menu-option-destructive;
  }
  &.pa-option-disabled,
  &.pa-option-disabled .pa-option-description {
    cursor: default;
    color: menu.$color-text-menu-option-disabled;
  }
  &.pa-option-readonly {
    cursor: default;
  }

  pa-avatar {
    margin-right: spacing.rhythm(1.5);
  }
  pa-icon:not(.pa-option-selected-icon) {
    margin-right: spacing.rhythm(1.5);

    &::ng-deep svg {
      fill: currentColor;
    }
  }
  pa-icon.pa-option-selected-icon {
    position: absolute;
    right: menu.$padding-menu-option-side;
    color: palette.$color-primary-regular;
  }

  pa-icon.pa-option-right-icon {
    margin-left: spacing.rhythm(1.5);
    margin-right: 0;
  }
}