@use '../../token/scss' as *;

@mixin menu-item {
  .cck-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font: $text-base-font-medium;
    padding: $spacing-6 $spacing-5;
    gap: $spacing-6;
    color: $text-dark-secondary;
  }

  .cck-menu-item:not(.cck-menu-item--disabled) {
    cursor: pointer;
  }

  .cck-menu-item--disabled,
  .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color {
    color: $base-disabled;
  }

  .cck-menu-item:not(.cck-menu-item--disabled):hover {
    background-color: $base-fill-1;
  }

  .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size {
    width: $icon-lg;
    height: $icon-lg;
  }

  .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg {
    fill: currentcolor;
  }
}