// Layouts.
.layout
  @apply bg-light/10 text-dark
  @apply dark:bg-black dark:text-light
  *
    @apply border-light dark:border-light/40
  a
    @apply text-primary

// body
//   *
.ui
  &-btn,
  &-alert
    @apply bg-white
    &.primary
      @apply bg-primary border-primary text-white
    &.accent
      @apply bg-accent border-accent text-white
    &.info
      @apply bg-info border-info text-white
    &.success
      @apply bg-success border-success text-white
    &.warning
      @apply bg-warning border-warning text-white
    &.error
      @apply bg-error border-error text-white
    &.dark
      @apply bg-dark border-dark text-white
    &.light
      @apply bg-light
    &:disabled
      @apply text-white bg-light border-light

  &-field
    .input
      @apply bg-white dark:bg-white/10 text-dark dark:text-white
    &.error
      .label,
      .input,
      .message
        @apply text-error border-error
    &:disabled
      .input
        @apply bg-light/10 text-dark/60
  &-btn
    @apply outline-none
    &:hover:not(:active)
      @apply bg-opacity-80

  &-btn,
  &-alert,
  &-field .input,
  &-card
      @apply rounded