@import url("main.css");

/*
    BUTTON.CSS

    Description: This css file is used for the buttons
    in every page. It includes all its properties like
    backgrounds, spaces, size, borders and others.
*/

.button {
    color: var(--color-yellow);
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 1.25em;
    border-radius: 50px;
    padding: 5px 20px;
    transition: background-color 0.3s;
    word-wrap: break-word;
    height: 56px;
    white-space: normal;
}

.button > img {
    width: 100%;
    height: 100%;
}

.button--border {
    border: 1px solid var(--color-white-border) !important;
}

.button--red {
    background-color: var(--color-primary);
}

.button--uppercase {
    text-transform: uppercase;
}

.button--disabled {
    opacity: 0;
    pointer-events: none;
    cursor: not-allowed;
}

/*
    Section: Responsive

    Description: Media queries that change styles from
    the buttons.
*/

@media (max-width: 992px) {
    .button {
        font-size: 1.15em;
    }
}

@media (max-width: 640px) {
    .button {
        font-size: 1.05em;
    }
}

@media (max-width: 500px) {
    .button {
        height: 48px;
        padding: 5px 10px;
        font-size: 1em;
    }
}

@media (max-width: 420px) {
    .button {
        font-size: 0.95em;
    }
}

@media (max-width: 320px) {
    .button {
        height: fit-content;
        font-size: 0.8em;
    }
}

@media (max-height: 640px) {
    .button {
        height: 48px;
    }
}