tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    a {
        @apply cursor-pointer;
    }
}

@layer components {
    .assign-container {
        @apply flex min-h-full
			flex-row
			px-5
			py-3;
    }
    .moving-container {
        @apply flex
			gap-3
			px-5
			py-3;
    }
    .moving-container .moving-column {
        @apply translate-x-0 transition-transform;
    }
    .panel-container {
        @apply container mx-auto;
    }
    .panel {
        @apply flex
			min-w-single-column flex-col
			overflow-hidden
			rounded-md
			bg-gray-100
			shadow-sm;
    }
    .panel-header {
        @apply flex flex-row
			items-center
			gap-1
			rounded-t-md
			bg-secondary-400
			px-3
			py-2
			shadow-sm;
    }
    .panel-header > h2 {
        @apply grow
			truncate
			text-left
			text-sm
			font-semibold
			uppercase
			tracking-wider
			text-white;
    }
    .accordion {
        @apply flex
			flex-col;
    }
    .accordion-header {
        @apply flex flex-row
			items-center
			gap-1
			px-5
			py-2;
    }
    .accordion-header > h2 {
        @apply my-2
			grow
			text-left
			text-lg
			font-semibold
			leading-7
			tracking-wider
			text-primary-700
			sm:text-xl;
    }
    .accordion-content {
        @apply flex flex-col
			gap-3
			overflow-hidden
			px-4
			transition-all;
    }
    .table-header-group .table-cell {
        @apply truncate
			font-semibold
			uppercase
			tracking-wider
			text-white;
    }
    .table-cell {
        @apply align-middle;
    }

    .form-label {
        @apply block
			text-sm
			font-medium
			text-gray-700;
    }
    .form-label.required {
        @apply after:ml-0.5
			after:text-danger-500
			after:content-['*'];
    }
    .form-select {
        @apply mt-1
			block
			w-full
			rounded-md
			border
			border-gray-300
			bg-white
			py-2
			px-3
			shadow-sm
			focus:border-secondary-500
			focus:outline-none
			focus:ring-secondary-500
			sm:text-sm;
    }
    .form-text {
        @apply mt-1
			block
			w-full
			rounded-md
			border-gray-300
			shadow-sm
			focus:border-secondary-500
			focus:ring-secondary-500
			sm:text-sm;
    }
    .form-checkbox {
        @apply h-4 w-4
		rounded
		border-gray-300
		text-secondary-600
		focus:ring-secondary-500;
    }

    .button {
        @apply inline-flex
			w-full
			max-w-md
			items-center
			justify-center
			rounded-md
			py-2
			px-4
			text-sm
			font-medium
			focus:outline-none
			focus:ring-2
			focus:ring-offset-2;
    }
    .button.button-primary {
        @apply border border-transparent
			bg-secondary-500
			text-white
			hover:bg-secondary-600
			focus:ring-secondary-400
			disabled:border-gray-200
			disabled:bg-white
			disabled:text-primary-400;
    }
    .button.button-secondary {
        @apply border border-gray-200
			bg-white
			text-primary-700
			hover:bg-gray-100
			focus:ring-secondary-400;
    }

    .icon {
        @apply min-h-5 min-w-5;
    }
    .icon-button {
        @apply flex
			items-center
			py-2
			px-3
			text-sm;
    }
    .icon-button > .icon {
        @apply mr-2;
    }

    .pill {
        @apply rounded-full
			px-2
			py-0.5
			text-xs
			font-medium;
    }
    .badge {
        @apply rounded-md
			px-2
			py-0.5
			text-xs
			font-medium;
    }
}