@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/typography';

@layer kz-components {
  .menuListItem {
    display: flex;
  }

  /* stylelint-disable no-descending-specificity */
  .menuItem {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    box-sizing: border-box;
    background: none;
    border: 2px transparent solid;
    text-align: start;
    padding: 6px calc(#{$spacing-sm} - 2px);
    margin: 0 $spacing-xs;
    min-height: calc(1.75 * #{$spacing-md});
    border-radius: 4px;
    font-family: $typography-paragraph-body-font-family;
    font-weight: $typography-paragraph-body-font-weight;
    font-size: $typography-paragraph-body-font-size;
    line-height: $typography-paragraph-body-line-height;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    text-decoration: none;
    color: $color-purple-800;

    &:hover {
      text-decoration: none;
    }

    &:not(.menuItem--disabled):hover,
    &:focus {
      background: $color-blue-100;
      color: $color-blue-500;

      .menuItem__Icon {
        color: $color-blue-500;
      }

      &.menuItem--destructive {
        background: $color-red-100;
        color: $color-red-600;

        .menuItem__Icon {
          color: $color-red-600;
        }
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      border-color: $color-blue-500;
    }
  }

  .menuItem--disabled {
    color: rgba($color-purple-800-rgb, 0.3);

    .menuItem__Icon {
      color: rgba($color-purple-800-rgb, 0.3);
    }
  }

  .menuItem--active {
    color: $color-blue-500;
    font-weight: $typography-paragraph-bold-font-weight;
  }

  .menuItem--destructive {
    color: $color-red-600;

    .menuItem__Icon {
      color: $color-red-600;
    }
  }

  .menuItem--destructive.menuItem--disabled {
    color: rgba($color-red-600-rgb, 0.3);

    .menuItem__Icon {
      color: rgba($color-red-600-rgb, 0.3);
    }
  }

  .menuItem__Label {
    flex-grow: 1;
  }

  .menuItem__Icon {
    margin-inline-end: calc(#{$spacing-md} / 3);
    display: flex;
    align-self: flex-start;
    transform: translateY(0.2em);
    color: rgba($color-purple-800-rgb, 0.75);
  }
  /* stylelint-enable no-descending-specificity */
}