@layer ui.layout {
  .interactive {
    position: relative;

    overflow: hidden;
    display: flex;
    align-items: center;

    min-height: 3rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-default);

    transition: opacity 0.15s ease;
  }

  .clickable {
    cursor: var(--custom-cursor, pointer);

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

    &:active {
      background-color: var(--color-item-active);
    }
  }

  .nonInteractive {
    pointer-events: none;
    cursor: default;
  }

  .disabled {
    --input-disabled-opacity: 1;

    opacity: 0.5;
  }
}
