@layer components {

  .btn {
    @apply items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:ring ring-blue-300 active:bg-blue-700 transition ease-in-out duration-150;
    &.gray {
      @apply text-white bg-gray-600 hover:bg-gray-500 focus:border-gray-700 focus:ring-gray-300 active:bg-gray-700;
    }

    &.warning {
      @apply text-white bg-yellow-600 hover:bg-yellow-500 focus:border-yellow-700 focus:ring-yellow-300 active:bg-yellow-700;
    }

    &.ok {
      @apply text-white bg-green-500 hover:bg-green-600 focus:border-green-700 focus:ring-green-300 active:bg-green-700;
    }

    &.danger {
      @apply text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:ring-red-300 active:bg-red-700;
    }
  }

  .alertbox {
    @apply bg-blue-50 border-solid border-2 border-blue-200 shadow rounded-lg;
    > div {
      @apply flex px-4 py-5 sm:p-6;

      .content {
        @apply ml-3;
        h3 {
          @apply text-base leading-5 font-medium text-blue-800;
        }

        > div {
          @apply mt-3 text-sm leading-5 text-blue-700;
        }
      }

      > div.icon {
        @apply flex-shrink-0;
        > svg {
          @apply h-14 w-14 text-blue-400;
        }
      }
    }

    &.warning {
      @apply bg-yellow-50 border-yellow-200;
      .content {
        h3 {
          @apply text-yellow-800;
        }

        > div {
          @apply text-yellow-700;
        }
      }

      div.icon svg {
        @apply text-yellow-400;
      }
    }

    &.danger {
      @apply bg-red-50 border-red-200;
      .content {
        h3 {
          @apply text-red-800;
        }

        > div {
          @apply text-red-700;
        }
      }

      div.icon svg {
        @apply text-red-400;
      }
    }

    &.ok {
      @apply bg-green-50 border-green-200;
      .content {
        h3 {
          @apply text-green-800;
        }

        > div {
          @apply text-green-700;
        }
      }

      div.icon svg {
        @apply text-green-400;
      }
    }
  }
}