@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
:root{
    --font-24: 2.4rem;
    --font-20: 2.0rem;
    --font-16: 1.6rem;
    --font-14: 1.4rem;
    --font-12: 1.2rem;
    --preto-azulado: #1C232B;
    --preto-azulado-2: #101720;
    --verde: #16A34A;
    --vermelho: #DC2626;
    --laranja: #EA580C;
    --branco: #FFFFFF;
    --roxo: #9333EA;
    --azul: #2499C7;
    --vermelho-2: #F8240F;
    --roxo-fraco: rgba(147, 51, 234, 0.75);
    --vermelho-fraco: rgba(220, 38, 38, 0.60);
    --verde-fraco: rgba(22, 163, 74, 0.5);
    --laranja-fraco: rgba(234, 88, 12, 0.6);
    --vermelho-fraco-2: rgba(220, 38, 38, 0.35);
    --verde-fraco-2: rgba(22, 163, 74, 0.35);
    --laranja-fraco-2: rgba(234, 88, 12, 0.35);
    --roxo-fraco-2: rgba(147, 51, 234, 0.4);
    --tipografia: 'Poppins', sans-serif;
    --space-80: 8rem;
    --space-40: 4.0rem;
    --space-24: 2.4rem;
    --space-16: 1.6rem;
    --space-14: 1.4rem;
    --space-8: 0.8rem;
    --space-4: 0.4rem;
    --drop-shadow-roxo: 0px 4px 4px rgba(138, 56, 245, 0.3);
    --drop-shadow-verde: 0px 4px 4px rgba(22, 163, 74, 0.5);
    --drop-shadow-laranja: 0px 4px 4px rgba(234, 88, 12, 0.6);
    --drop-shadow-vermelho: 0px 4px 4px rgba(220, 38, 38, 0.60);
    --radius-5: 0.5rem;
    --radius-10: 1rem;
    --radius-full: 999rem;
    --transition: 0.3s;
}
html, body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--tipografia);
}
html{
    font-size: 62.5%
}
body{
    background-color: var(--preto-azulado);
}
.task-app__header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    padding: var(--space-16) var(--space-80);
    background-color: inherit;   
    & .task-app__title-wrapper{
        width: 100%;
        height: max-content;
        font-size: var(--font-12);
        text-align: center;
        color: var(--branco);
        background-color: var(--roxo-fraco);
        border-radius: var(--radius-5)
    }
    /* Responsividade Mobile */
    @media (min-width: 420px) and (max-width: 576px){
        .task-app__title-wrapper{
            width: 70%;
        }
    }
    /* Responsividade tablet */
    @media (min-width: 577px) and (max-width: 768px){
        .task-app__title-wrapper{
            width: 50%;
        }
    }
    /* Responsividade Desktop */
    @media (min-width: 769px) and (max-width: 1024px){
        .task-app__title-wrapper{
            width: 35%;
        }
    }
    /* Responsividade Desktops grandes */
    @media (min-width: 1025px){
        .task-app__title-wrapper{
            width: 25%;
        }
    }
}
.task-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-14) var(--space-40);
    gap: var(--space-8);
    & .task-form__input{
        width: 100%;
        height: 3rem;
        padding: 0 var(--space-8);
        box-sizing: border-box;
        font-size: var(--font-14);
        border-radius: var(--radius-10);
        border: none;
        outline: none;
        transition: var(--transition);
    }
    & .task-form__input:hover{
        background-color: var(--roxo-fraco-2);
        color: var(--branco);
        border: 1px solid var(--branco);
        transition: var(--transition);
    }
    & .task-form__input:focus{
        background-color: var(--roxo-fraco);
        border: 1px solid var(--branco);
        color: var(--branco);
        box-shadow: var(--drop-shadow-roxo);
        transition: var(--transition);

    }
    & .task-form__priority{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: var(--space-14) var(--space-8);
        text-align: center;
        color: var(--branco);
        border-radius: var(--radius-10);
    }
    & .task-form__priority > legend{
        font-size: var(--font-16);
    }
    & .task-form__priority > label{
        padding: var(--space-8) var(--space-8);
        font-size: var(--font-12);
        border-radius: var(--radius-10);
        border: 2px solid transparent;
        cursor: pointer;
        transition: var(--transition);
    }
    & .task-form__priority > label > .task-form__priority-input{
        display: none;
    }
    & .task-form__priority > label::before{
        content: '';
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        border: 2px solid #bdc3c7;
        border-radius: var(--radius-full);
        margin-right: var(--space-8);
        background: white;
        transition: var(--transition);
    }
    /* Urgente */
    & .task-form__priority > label:has(.task-form__priority-input--urgente:hover){
        background-color: var(--vermelho-fraco-2);
    }
    & .task-form__priority > label:has(.task-form__priority-input--urgente:hover)::before{
        background-color: var(--vermelho-fraco);
    }
    & .task-form__priority > label:has(.task-form__priority-input--urgente:checked){
        border-color: var(--vermelho-fraco);
        background-color: var(--vermelho-fraco-2);
    }
    & .task-form__priority > label:has(.task-form__priority-input--urgente:checked)::before {
        border-color: var(--vermelho);
        background: var(--vermelho-fraco);
    }
    /* Importante */
    & .task-form__priority > label:has(.task-form__priority-input--importante:hover){
        background-color: var(--laranja-fraco-2);
    }
    & .task-form__priority > label:has(.task-form__priority-input--importante:hover)::before{
        background-color: var(--laranja-fraco);
    }
    & .task-form__priority > label:has(.task-form__priority-input--importante:checked){
        border-color: var(--laranja-fraco);
        background-color: var(--laranja-fraco-2);
    }
    & .task-form__priority > label:has(.task-form__priority-input--importante:checked)::before {
        border-color: var(--laranja);
        background: var(--laranja-fraco);
    }
    /* Rotineira */
    & .task-form__priority > label:has(.task-form__priority-input--rotineira:hover){
        background-color: var(--verde-fraco-2);
    }
    & .task-form__priority > label:has(.task-form__priority-input--rotineira:hover)::before{
        background-color: var(--verde-fraco);
    }
    & .task-form__priority > label:has(.task-form__priority-input--rotineira:checked){
        border-color: var(--verde-fraco);
        background-color: var(--verde-fraco-2)
    }
    & .task-form__priority > label:has(.task-form__priority-input--rotineira:checked)::before {
        border-color: var(--verde);
        background: var(--verde-fraco);
    }
    & .task-form__button{
        padding: var(--space-8) var(--space-14);
        border-radius: var(--radius-full);
        border: 0;
        transition: var(--transition);
        cursor: pointer;
    }
    & .task-form__button:hover{
        transform:translateY(-10%);
        background-color: var(--roxo-fraco);
        color: var(--branco);
        box-shadow: var(--drop-shadow-roxo);
    }
    & .task-form__button:active{
        transform:translateY(10%);
        background-color: var(--roxo);
        box-shadow: none; 
    }  
    /* Responsividade  Mobile e Tablet*/
    @media (min-width: 420px) and (max-width: 768px){
        .task-form__input{
            height: 4rem;
            font-size: var(--font-16);
        }
        .task-form__priority{
            width: 90%;
        }
        .task-form__priority > legend{
            font-size: var(--font-24);
        }
        .task-form__priority > label{
            font-size: var(--font-16);
        }
        .task-form__button{
            padding: var(--space-8) var(--space-16);
            font-size: var(--font-16);
        }
    }
    /* Responsividade Desktop */
    @media (min-width: 769px) and (max-width: 1024px){
        .task-form__input{
            height: 4rem;
            font-size: var(--font-16);
        }
        .task-form__priority{
            width: 70%;
        }
        .task-form__priority > legend{
            font-size: var(--font-24);
        }
        .task-form__priority > label{
            font-size: var(--font-16);
        }
        .task-form__button{
            padding: var(--space-8) var(--space-24);
            font-size: var(--font-16);
        }
    }
    /* Responsividade Desktops maiores */
    @media (min-width: 1025px){
        .task-form__input{
            width: 90%;
            height: 4rem;
            font-size: var(--font-16);
        }
        .task-form__priority{
            width: 80%;
        }
        .task-form__priority > legend{
            font-size: var(--font-24);
        }
        .task-form__priority > label{
            font-size: var(--font-16);
        }
        .task-form__button{
            padding: var(--space-8) var(--space-24);
            font-size: var(--font-16);
        }
    }
}
.task-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-40);
    & .task-list__tarefa{
        display: grid;
        grid-template-columns: 1fr 2rem 2rem;
        gap: 0.4rem;
        align-items: center;
        width: 100%;
        height: 2.5rem;
        padding: 0 var(--space-8);
        font-size: var(--font-14);
        color: var(--branco);
        border: 2px solid white;
        border-radius: var(--radius-5);
        transition: var(--transition);
    }
    /* Urgente */
    & .urgente{
        background-color: var(--vermelho-fraco);
        border-color: var(--vermelho)
    }
    & .urgente:hover{
        box-shadow: var(--drop-shadow-vermelho);
    }
    /* Importante */
    & .importante{
        background-color: var(--laranja-fraco);
        border-color: var(--laranja)
    }
    & .importante:hover{
        box-shadow: var(--drop-shadow-laranja);
    }
    /*Rotineira */
    & .rotineira{
        background-color: var(--verde-fraco);
        border-color: var(--verde)
    }
    & .rotineira:hover{
        box-shadow: var(--drop-shadow-verde);
    }
    & .task-list__tarefa:not(:hover){
        transform: scale(0.99);
    }
    & .task-list__tarefa > .ti{
        transform: scale(1.3);
        cursor: pointer;
        transition: var(--transition);
    }
    & .task-list__tarefa > .ti:hover{
        transform: scale(1.4);
    }
    & .task-list__tarefa > .ti:active{
        transform: scale(1.2);
    }
    & .ti-square-rounded-x-filled{
        color: var(--vermelho-2);
    }
    & .ti-edit{
        color: var(--azul)
    }
    /* Responsividade Mobile e Tablet */
    @media (min-width: 420px) AND (max-width: 768px){
        .task-list__tarefa{
            grid-template-columns: 1fr 2.5rem 2.5rem;
            height: 4rem;
            font-size: var(--font-16);
        }
        .task-list__tarefa > .ti:hover{
            transform: scale(1.6);
        }
    }
    /* Responsividade Desktop */
    @media (min-width: 769px) AND (max-width: 1024px){
        .task-list__tarefa{
            grid-template-columns: 1fr 3rem 3rem;
            height: 4rem;
            font-size: var(--font-16);
        }
        .task-list__tarefa > .ti{
            transform: scale(1.5);
        }
        .task-list__tarefa > .ti:hover{
            transform: scale(1.7);
        }
        
    }
    /* Responsividade Desktops maiores */
    @media (min-width: 1024px){
        .task-list__tarefa{
            grid-template-columns: 1fr 3.5rem 3.5rem;
            height: 5rem;
            font-size: var(--font-20);
        }
        .task-list__tarefa > .ti{
            transform: scale(1.6);  
        }
        .task-list__tarefa > .ti:hover{
            transform: scale(2);
        }
    }
}
.modal-edit{
    position: fixed;
    top: 40%;
    width: calc(100% - 8rem);
    padding: var(--space-8) var(--space-14);
    border: 1px solid black;
    border-radius: var(--radius-10);
    background-color: var(--preto-azulado-2);
    & .modal-edit__content{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-8);
        margin-bottom: var(--space-8);
        font-size: var(--font-14);
        color: var(--branco);
    }
    & .modal-edit__input{
        width: 100%;
        height: 2.5rem;
        padding: 0 0.4rem;
        border: 1px solid white;
        border-radius: var(--radius-10);
        outline: none;
    }

    & .modal-edit__actions{
        display: flex;
        justify-content: center;
        gap: var(--space-8);
        & .modal-edit__button{
            border: 1px solid;
            border-radius: var(--radius-10);
            outline: none;
            cursor: pointer;
            transition: var(--transition);
            
        }
        & .modal-edit__button--update{
            color: var(--branco);
            background-color: var(--verde-fraco);
            border-color: var(--verde);
        }
        & .modal-edit__button--update:hover{
            transform:translateY(-10%);
        }
        & .modal-edit__button--update:active{
            transform:translateY(10%);
        }
        & .modal-edit__button--cancel{
            color: var(--branco);
            background-color: var(--vermelho-fraco);
            border-color: var(--vermelho);
        }
        & .modal-edit__button--cancel:hover{
            transform:translateY(-10%);
        }
        & .modal-edit__button--cancel:active{
            transform:translateY(10%);
        }
    }
    /* Responsividade Mobile */
    @media (min-width: 420px) AND  (max-width: 576px){
        .modal-edit__content{
            margin-bottom: var(--space-14)
        }
        .modal-edit__content > label{
            font-size: var(--font-16);
        }
        .modal-edit__input{
            height: 4rem;
            font-size: var(--font-16);
        }
        .modal-edit__button{
            padding: var(--space-8) var(--space-16);
            font-size: var(--font-16);
        }
    }   
}
/* Responsividade Tablet */
@media (min-width: 577px) AND (max-width: 768px){
    .modal-edit{
        width: 80%;
        & .modal-edit__content{
            margin-bottom: var(--space-14)
        }
        & .modal-edit__content > label{
            font-size: var(--font-16);
        }
        & .modal-edit__input{
            height: 4rem;
            font-size: var(--font-16);
        }
        & .modal-edit__button{
            padding: var(--space-8) var(--space-16);
            font-size: var(--font-16);
        }
    }
        
} 
/* Responsividade Desktop */
@media (min-width: 769px) AND (max-width: 1024px){
    .modal-edit{
        width: 70%;
        & .modal-edit__content{
            margin-bottom: var(--space-14)
        }
        & .modal-edit__content > label{
            font-size: var(--font-16);
        }
        & .modal-edit__input{
            height: 4rem;
            font-size: var(--font-16);
        }
        & .modal-edit__button{
            padding: var(--space-8) var(--space-24);
            font-size: var(--font-16);
        }
    }    
} 
/* Responsividade Desktops maiores */
@media (min-width: 1024px){
    .modal-edit{
        width: 70%;
        & .modal-edit__content{
            margin-bottom: var(--space-14)
        }
        & .modal-edit__content > label{
            font-size: var(--font-16);
        }
        & .modal-edit__input{
            height: 4rem;
            font-size: var(--font-16);
        }
        & .modal-edit__button{
            padding: var(--space-8) var(--space-24);
            font-size: var(--font-16);
        }
    }
}