@import './fonts.css';

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

body{
    @apply font-poppins-regular text-dark-blue;
}

h3{
    @apply font-poppins-medium text-3xl;
}

/** FORMS START **/

input , textarea{
    @apply pt-4 pb-4 rounded-lg border border-bright-grey w-full text-base pl-14 pr-4;
}

input[type='search']::placeholder{
    @apply text-sm;
}

input[type='number']{
    @apply !p-4 w-[150px] shrink;
}

select {
    @apply pl-4 py-4 rounded-lg border border-bright-grey text-base w-full appearance-none bg-arrow-select bg-no-repeat bg-select bg-size-select pr-10 cursor-pointer;
}

.small-select{
    @apply text-sm py-2.5 pl-small-select pr-4 w-[220px];
}
label.label-small-select {
    @apply absolute font-poppins-medium text-sm text-dark-blue left-4 top-1/2 -translate-y-1/2;
}

label.is-radio{
    @apply relative left-0 top-0 translate-y-0 whitespace-nowrap text-dark-blue pl-9 cursor-pointer;
}

label.is-radio.is-white{
    @apply !text-white;
}

input.is-radio{
    @apply opacity-0 absolute h-0 !w-0 cursor-pointer !p-0;
}

.custom-radio{
    @apply h-[18px] w-[18px] rounded-full border border-bright-grey absolute left-0 top-1/2 -translate-y-1/2;
}

.is-checkbox{
    @apply rounded-sm;
}

.custom-radio.is-white{
    @apply bg-white;
}
.custom-radio::after {
    @apply hidden absolute w-[11px] h-[11px] top-1/2 left-1/2 bg-radio bg-no-repeat bg-center bg-contain;
    transform: translate(-50%, -50%);
    content: '';
}


label.is-radio:hover .custom-radio{
    @apply border-grey bg-bright-grey;
}

label.is-radio input:checked + .custom-radio{
    @apply border-dark-blue bg-dark-blue;
}
label.is-radio input:checked + .custom-radio:after{
    @apply block;
}

input.is-radio{
    @apply w-fit ;
}

select option[disabled]{
    @apply text-grey;
}

input:focus-visible, select:focus-visible, textarea:focus-visible{
    @apply outline-0;
}

input.is-active, textarea.is-active{
    @apply pt-6 pb-2;
}

input[type="file"]{
    @apply w-0 h-0 opacity-0 absolute -z-10 hidden;
}

label {
    @apply absolute text-base text-grey left-14 top-1/2 -translate-y-1/2;
}

label.is-active{
    @apply translate-y-0 top-2 text-xs;
}

.btn {
    @apply rounded-full font-poppins-semi-bold py-4 px-6 text-base flex gap-2 items-center justify-center;
}

.link {
    @apply underline font-poppins-semi-bold text-sm;
}

.link.is-upload{
    @apply text-white left-0 translate-y-0 top-0 flex items-center gap-2 cursor-pointer relative;
}

.input-icon{
    @apply absolute left-5 top-1/2 -translate-y-1/2;
}

.password-icon{
    @apply absolute top-1/2 -translate-y-1/2 right-5 cursor-pointer;
}

input.is-muted{
    @apply bg-bright-grey ;
}

/** FORMS END **/


/** ASIDE START **/

aside {
    @apply font-poppins-medium text-white text-base bg-dark-blue w-[250px] md:w-[300px] ipad:w-[340px] ipad:min-w-[340px] py-6 px-7 min-h-screen shadow-aside relative;
}

.icon-aside{
    @apply text-transparent shrink-0 ;
}

.icon-aside.is-active{
    @apply text-bright-blue;
}

.aside-link{
    @apply p-3.5 rounded-lg flex gap-2 items-center hover:bg-blue/20 ipad:text-base text-sm font-poppins-medium relative;
}
.aside-link.is-works{
    @apply m-2 h-[100px] flex flex-col items-center justify-center gap-2;
}

.aside-link.is-active{
    @apply bg-blue border-r-3 border-bright-blue;
}

.aside-link-number{
    @apply h-5 w-5 rounded-full bg-bright-blue hidden items-center justify-center text-dark-blue text-sm absolute shrink-0 top-3 right-3;
}

.aside-link-number.is-set{
    @apply flex;
}

/** ASIDE END **/


/** MAIN START **/

.main-container{
    @apply px-container py-12 overflow-hidden;
    width: calc(100vw - 340px);
}

@media (max-width: 1185px) {
    .main-container {
        width: calc(100vw - 300px);
    }
}
@media (max-width: 885px) {
    .main-container {
        width: calc(100vw - 250px);
    }
}
th:first-child {
    @apply rounded-l-lg ;
}

th:last-child {
    @apply rounded-r-lg;
}

th svg {
    @apply inline ml-2 cursor-pointer;
}

td{
    @apply h-12 align-middle text-center;
}

.btn.is-add{
    @apply flex items-center justify-center px-3.5 py-3 gap-1 border border-dashed border-dark-blue w-fit hover:bg-gray-100;
}

.table-action{
    @apply right-8 absolute top-1/2 -translate-y-1/2 cursor-pointer;
}

.table-row{
    @apply border-b border-bright-grey;
}

.table-row:last-child{
    @apply border-none;
}

#dropdown-arrow{
   @apply ml-3 transition-all duration-150 ease-in-out;
}

.step-tag{
    @apply p-2.5 rounded-lg text-white text-lg font-poppins-medium shrink-0;
}

.recap-card {
   @apply flex-col flex gap-5 p-5 w-full items-stretch border bg-white rounded-lg relative;
}

.recap-card-icon{
    @apply absolute top-5 right-5 cursor-pointer;
}

.recap-card li {
    @apply ml-5;
}

.dashboard-card{
    @apply p-6 border border-dark-blue rounded-lg flex-col items-start flex justify-between gap-8 bg-white;
}

.dashboard-card.is-center{
    @apply items-center;
}

.dashboard-btn{
    @apply flex ipad:flex-row flex-col gap-4 items-center justify-center p-5 rounded-lg border border-bright-grey;
}
.dashboard-btn p{
    @apply ipad:text-left text-center;
}
/** MAIN END **/