/**
 * For reusable components with specific classes (buttons, cards, badges ...).
 * @layer components {
 *   .btn {
 *     @apply px-4 py-2 rounded bg-blue-500 text-white;
 *   }
 * }
 */
.can-copy {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-gray-3);
  cursor: copy;

  &:hover {
    text-decoration-color: var(--color-gray-7);
  }
}

[disabled],
[aria-disabled="true"] {
  color: var(--color-gray-6);
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
}

[aria-busy="true"] {
  pointer-events: none;
}

.option {
  @apply hover:bg-gray-1 focus-full:text-gray-8 relative flex h-8 w-full cursor-pointer items-center px-2 text-left outline-none;

  &[disabled] {
    color: var(--color-gray-6);
    pointer-events: none;
  }

  &[data-presentation="compact"] {
    @apply first:rounded-t-2xl last:rounded-b-2xl;
  }
  &[data-presentation="large"] {
    @apply rounded-2xl;
  }

  .bullet {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: 2px solid var(--color-gray-2);
    font-size: var(--font-size-xs);
    border-radius: 50%;
    margin: 0 0.75rem 0 3px;
  }
}

.p8n-setting {
  @apply flex items-center justify-between;

  & > :first-child {
    @apply text-body-sm text-gray-6;
  }
  & > :nth-child(2) {
    text-align: right;
  }
  & > :nth-child(2) input {
    text-align: right;
  }
  &.multiple {
    align-items: flex-start;
  }
}

.separator-sm {
  @apply bg-gray-1 relative mx-auto my-2 h-px rounded-xs border-t-0;
}

.separator-xl {
  @apply bg-gray-1 relative mx-auto my-2 h-1 w-1/2 rounded-xs border-t-0;
}