@use '../../../common/scss/global.scss';
@use '~@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';

:host {
  display: block;
}

.overflow-menu-item {
  display: block;
  padding: 12px 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: background-color 0.15s ease-out, outline-color 0.15s ease-out;

  &:hover {
    background: var(--kd-color-background-inverse-hover);
  }

  &:focus {
    outline-color: var(--kd-color-border-focus);
  }

  &.destructive {
    color: var(--kd-color-text-destructive);
    border-top: 1px solid var(--kd-color-border-light);
  }

  &[disabled] {
    color: var(--kd-color-text-disabled);
    background: none;
    cursor: not-allowed;
  }

  // &.right {
  //   text-align: right;
  // }
}