@use "../../wc";

:host {
  display: block;
}

.key {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: var(--zn-spacing-medium);
  align-items: center;
  text-align: left;

  &__description {
    font-size: var(--zn-font-size-small);
    color: rgb(var(--zn-text-body));
    opacity: 0.7;
    line-height: var(--zn-line-height-normal);
    user-select: none;
  }
}

:host([active]) .key__label {
  color: rgb(var(--zn-text-heading));
  font-weight: 600;
}

:host(:not([active])) {
  .key__description {
    opacity: 0.6;
  }

  zn-chip {
    --zn-chip-color: rgb(var(--zn-text-body));
    opacity: 0.5;
  }
}