// Layouts.
.layout
  @apply flex flex-col h-full
  @apply min-w-[320px]
  min-height: 100vh
  overflow: hidden
  *
    @apply text-base
  main
    @apply flex flex-col flex-1

  h1
    @apply text-xl md:text-2xl font-bold
  h2
    @apply text-lg md:text-xl font-bold
  h3
    @apply text-base md:text-lg font-bold
  h4
    @apply text-sm md:text-base font-bold

  p
    &:not(:last-child)
      @apply mb-4

  .title
    @apply mb-4

// Ui.
.ui
  &-btn
    @apply h-[38px] text-base
    @apply flex justify-center items-center
    @apply px-2 border
    > *:not(:last-child)
      @apply mr-2
    .label
      @apply text-base font-normal

  &-field
    &-wrap
      .label
        @apply mb-1
      .input
        @apply h-[38px] text-base
        @apply block w-full border
        > *
          @apply w-full h-full px-2 py-2 outline-none
    .description,
    .message
      @apply w-full pl-1 mt-1 text-sm

    &-checkbox
      @apply mb-4
      .ui-field-wrap
        @apply flex items-center justify-start
        .label
          @apply mb-0
        .input
          @apply w-max order-first mr-2
          @apply w-[24px] h-[24px] min-w-[24px] min-h-[24px]
          @apply border rounded

    &-textarea
      .input
        @apply h-auto
        > *
          @apply min-h-[94px]
          @apply leading-5

  &-alert
    @apply relative border
    &:not(:last-child)
      @apply mb-2
    &-close
      @apply absolute top-0 right-0 p-2
      .ui-icon
        @apply cursor-pointer
    &-content
      @apply p-3

  &-icon
    @apply block w-[24px]

  &-card
    @apply flex flex-col
    @apply border bg-white
    &-head
      @apply pt-3 px-3
    &-body
      @apply p-3
      @apply flex-1
    &-actions
      @apply pb-3 px-3
      @apply flex gap-2

  &-form
    &-header
      @apply pb-4
    &-messages
      @apply pb-4
      > *:not(:last-child)
        @apply mb-2
    &-body
      > *:not(:last-child)
        @apply mb-4
    &-actions
      @apply flex items-center pt-4
      > *:not(:last-child)
        @apply mr-2

  &-table
    @apply w-full
    thead
      tr
        th
          @apply py-2 px-3
          @apply text-sm text-left
    tbody
      tr
        &:hover
          @apply bg-light
        &:not(:first-child)
          @apply border-t
        td
          @apply p-2
  &-dialog
    @apply bg-dark/30
    @apply flex flex-col justify-center items-center
    @apply z-50
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0
    &:not([open])
      @apply hidden
    &-window
      @apply bg-white text-dark
      &-header
        @apply flex items-center justify-between py-2 px-3
        > .title
          @apply text-lg font-normal
        .ui-icon-close
          @apply w-[30px] h-[30px] p-0 border-0 cursor-pointer
          &:hover
            @apply text-dark
      &-content
        @apply p-3
  &-toggle-theme
    .ui-icon
      @apply cursor-pointer
  &-pagination
    .pages
      @apply flex
      &-first,
      &-numbers,
      &-last
        @apply flex items-end
      .page-item
          @apply w-[38px] h-[38px]
      .page-separator
        @apply block mx-2
      &-numbers
        .page-item:not(:last-child)
          @apply mr-2
