@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  .Block {
    display: inline-block;
    border: 1px solid var(--cmm-color-border-base);
    border-radius: var(--cmm-radius-md);
    padding: 0.25rem;
    min-width: 10rem;
    box-shadow: var(--cmm-shadow-lg);
    background: var(--cmm-Menu-bg);
    color: var(--cmm-color-font-base);
    font-size: var(--cmm-font-size-sm);
  }

  .item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--cmm-radius-sm);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: var(--cmm-transition-bg);
    width: 100%;
    color: var(--cmm-Menu-font-label);

    &--active {
      background: var(--cmm-Menu-bg-hover);
    }

    &--disabled {
      cursor: not-allowed;
      background: var(--cmm-Menu-bg);
    }

    > svg {
      width: locals.$iconSize;
      height: locals.$iconSize;
      color: var(--cmm-Menu-font-icon);
    }
  }

  .group {
    color: var(--cmm-Menu-font-group);
    padding: 0.25rem 0.75rem;
    width: 100%;
  }

  .divider {
    border-top: 1px solid var(--cmm-color-border-base);
    margin: 0.25rem 0;
  }
}
