/*IMPORTA A FONTE*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*RESET CSS E ESTILO GLOBAL*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/*CONDIGURAÇÃO DA PÁGINA TODA*/
html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background-color: rgb(85, 21, 146);
}

/*CONTAINER DO BOTÃO ESTILIZADO*/
.checkbox {
    height: 80px;
    width: 270px;
    padding: 20px;
    display: flex;
    background-color: rgb(92, 92, 226);
    align-items: center;
    border-radius: 5px;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
    justify-content: space-between;
}

/*ESTILO DO INPUT (SWITCH)*/
.checkbox input {

    /*remove o contorno ao clicar*/
    outline: none;

    height: 40px;
    width: 90px;
    border-radius: 50px;
    appearance: none;
    position: relative;

    /*cor de fundo inicial*/
    background-color: #e6e6e6;

    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

    /*animação suave*/

    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* ocorre por 0.4segundos / faz com que a animação tenha um efeito de elástico (começa rápida, ultrapassa um pouco o final e volta suavemente)*/
}

/*ESTILO DO INPUT QUANDO MARCADO*/
.checkbox input:checked {
    background-color: #251870;
}

/*BOLINHA QUE DESLIZA DENTRO DO BOTÃO*/
.checkbox input::before {
    position: absolute;

    /*elemento vazio que vira a bolinha*/
    content: "";

    /*começa no lado esquerdo*/
    left: 0;

    height: 100%;
    width: 40px;
    background: linear-gradient(#fff, #f2f2f2, #e6e6e6, #d9d9d9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /*deixa o input arredondado (bolinha)*/
    border-radius: 50px;

    /*fica um pouco menor que o container*/
    transform: scale(0.85);

    /*animação do movimento*/
    transition: left 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/*MOVIMENTA A BOLINHA PARA A DIREITA QUANDO SELECIONADO*/
input:checked::before {
    left: 50%;
}

/*TEXTO QUE APARECE AO LADO, ANTES DE SELECIONAR*/
.checkbox .texto:before {
    content: "Desativado";
    font-size: 25px;
    font-weight: 500;
    color: #bfbfbf;
}

/*TEXTO QUE APARECE APÓS SELECIONAR
- muda sua cor, conteúdo e tamanho*/
input:checked~.texto::before {
    color: #251870;
    font-size: 27px;
    content: "Ativado";
    padding: 10px;
}