button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.button_filled {
    position: relative;
    z-index: 1000;
    background: var(--orange-700);
    padding: 12px 20px;
    color: var(--white);
    border-radius: 23px;
    font-size: 14px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    flex: 1;
    width: auto;
    cursor: pointer;
    &:hover {
        background: var(--orange-800);
        transition: 0.2s ease-out;
    }
    &:active {
        background: var(--orange-900);
    }
}
.button_outlined {
    border: 1px solid var(--orange-700);
    padding: 12px 20px;
    color: var(--grey-800);
    border-radius: 23px;
    font-size: 14px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    flex: 1;
    cursor: pointer;
    &:hover {
        background: var(--orange-800);
        transition: 0.2s ease-out;
        border: 1px solid var(--orange-800);
        color: var(--white);
        span {
            color: var(--white);
        }
    }
    &:active {
        background: var(--orange-900);
        border: 1px solid var(--orange-900);
        color: var(--white);
    }
}

.button_outlined_small {
    border: 1px solid var(--orange-700) ;
    background: transparent;
    padding: 12px 20px;
    color: var(--grey-800) ;
    border-radius: 23px;
    font-size: 14px;
    height: 35px;
    max-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    flex: 1;
    gap: 5px;
    flex-shrink: 0;
    cursor: pointer;
    &:hover {
        background: var(--orange-800) ;
        transition: 0.2s ease-out;
        border: 1px solid var(--orange-800) ;
        color: var(--white) ;
    }
    &:active {
        background: var(--orange-900) ;
        border: 1px solid var(--orange-900) ;
        color: var(--white) ;
    }
}
.button_outlined_small.active {
    background: var(--orange-700) ;
    color: var(--white) ;
    border: 1px solid transparent;
}
.button_outlined_medium {
     border: 1px solid var(--orange-700);
     padding: 12px 20px;
     color: var(--grey-800);
     border-radius: 23px;
     font-size: 14px;
     height: 41px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: "Poppins", sans-serif;
     flex-grow: 1;
     cursor: pointer;
     &:hover {
         background: var(--orange-800);
         transition: 0.2s ease-out;
         border: 1px solid var(--orange-800);
         color: var(--white);
     }
     &:active {
         background: var(--orange-900);
         border: 1px solid var(--orange-900);
         color: var(--white);
     }
 }

.button_filled_small {
    background: var(--orange-700);
    padding: 7px 15px;
    color: var(--white);
    border-radius: 23px;
    font-size: 14px;
    min-height: 35px;
    max-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    flex: 1;
    width: auto;
    cursor: pointer;
    &:hover {
        background: var(--orange-800);
        transition: 0.2s ease-out;
    }
    &:active {
        background: var(--orange-900);
    }
    @media(min-width: 768px) {
        padding: 12px 20px;
    }
}