@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

body {
    @apply .bg-gray-900 .text-white .font-sans;
}

.shadow-big {
    box-shadow: 3px 3px 10px -1px rgba(0, 0, 0, 0.75);
}

.nav-content {
    & h1 {
        @apply .text-4xl .font-bold;
    }
}

table {
    @apply .border-gray-900 .rounded-sm .border .w-full;

    & thead tr {
        @apply .bg-gray-900;
    }

    th, td {
        @apply .p-1 .border-gray-900 .border-r .border-b;
    }

    tbody tr.entry[data-nth="even"] {
        @apply .bg-gray-800;
    }

    tbody tr.entry[data-nth="odd"] {
        @apply .bg-gray-700;
    }
}

.btn {
    @apply .px-2 .py-1 .bg-blue-700 .rounded-sm .font-normal .border .border-blue-700;

    &:hover {
      @apply .bg-blue-600;
    }

    &[disabled] {
      @apply .bg-transparent .border .border-blue-700 .text-gray-400 .cursor-not-allowed;
    }
}

.input-ctrl {
    @apply .bg-gray-800 .py-1 .px-1 .rounded .border .border-gray-900;
}

.input-ctrl-hover {
    @apply .border-blue-500 .shadow;
}

input, select {
    @apply .input-ctrl;

    &:focus {
        @apply .input-ctrl-hover;
    }
}

form.form-ctrl > div {
    @apply .flex .py-1 .items-center;

    & > *:nth-child(1) {
      @apply .flex-grow-0 w-1/6;
    }

    & > *:nth-child(2) {
      @apply .flex-grow-0 w-1/3;
    }
  }