popup-forms-react/src/assets/styles/index.tailwind.css

/* purgecss start ignore */

@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
/***** FONTS *****/

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.eot');
    src: url('../fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Gilroy-Regular.woff2') format('woff2'), url('../fonts/Gilroy-Regular.woff') format('woff'), url('../fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.eot');
    src: url('../fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Gilroy-Medium.woff2') format('woff2'), url('../fonts/Gilroy-Medium.woff') format('woff'), url('../fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.eot');
    src: url('../fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Gilroy-SemiBold.woff2') format('woff2'), url('../fonts/Gilroy-SemiBold.woff') format('woff'), url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBold.eot');
    src: url('../fonts/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'), url('../fonts/Gilroy-ExtraBold.woff') format('woff'), url('../fonts/Gilroy-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@layer base {
    p {
        text-indent: 1rem;
        margin: .3rem 0 .5rem 0;
    }
}

@layer components {
    .grecaptcha-badge {
        display: none !important;
    }
}

@layer components {
    .btn-primary {
        @apply appearance-none;
        @apply flex;
        @apply relative;
        @apply w-full;
        @apply py-3;
        @apply border-0;
        @apply rounded-md;
        @apply border-primary-800;
        @apply bg-primary-800;
        @apply text-white;
        @apply truncate;
        @apply cursor-pointer;
        @apply transform;
        @apply shadow-md;
    }
    .btn-primary:hover {
        @apply bg-primary-500;
    }
    .btn-primary:focus {
        @apply bg-primary-500;
        @apply outline-none;
    }
    .btn-primary:active {
        @apply shadow-inner;
        @apply bg-primary-800;
        @apply scale-98;
    }
    .btn-primary:disabled {
        @apply bg-primary-800;
        @apply opacity-50;
        @apply shadow-md;
        @apply scale-100;
        @apply cursor-not-allowed;
    }
}

@layer components {
    .btn-secondary {
        @apply appearance-none;
        @apply flex;
        @apply relative;
        @apply w-full;
        @apply py-3;
        @apply border-2;
        @apply rounded-md;
        @apply border-primary-800;
        @apply bg-white;
        @apply text-primary-800;
        @apply truncate;
        @apply cursor-pointer;
        @apply transform;
        @apply shadow-md;
    }
    .btn-secondary:hover {
        @apply bg-primary-500;
        @apply text-white;
    }
    .btn-secondary:focus {
        @apply bg-primary-500;
        @apply outline-none;
    }
    .btn-secondary:active {
        @apply shadow-inner;
        @apply bg-primary-500;
        @apply scale-98;
    }
    .btn-secondary:disabled {
        @apply bg-white;
        @apply opacity-50;
        @apply shadow-md;
        @apply scale-100;
        @apply cursor-not-allowed;
    }
}

@layer components {
    .form-input {
        @apply rounded-md;
        @apply border-0;
        @apply ring-2;
        @apply ring-gray-200;
    }
    .form-input:active {
        @apply bg-secondary-100;
    }
    .form-input:focus {
        @apply ring-4;
        @apply ring-offset-0;
        @apply ring-primary-700;
        @apply bg-secondary-100;
        @apply ring-opacity-60;
    }
    .form-checkbox {
        @apply form-input;
        @apply w-5;
        @apply h-5;
        @apply rounded;
    }
    .form-radio {
        @apply form-checkbox;
        @apply rounded-full;
        @apply ring-gray-300;
    }
    .form-radio:checked {
        @apply ring-gray-400;
        background-image: none;
    }
}