@import "../abstract/variables";

.table-button--primary {
    width: 100%;
    padding: 10px;
    background-color: $section-primary-color;
    color: $primary-text-color;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;

    &:hover {
        background-color: $section-secondary-color;
    }

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button--primary {
    width: 100%;
    padding: 10px;
    background-color: $section-primary-color;
    color: $primary-text-color;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;

    &:hover {
        background-color: $section-secondary-color;
    }

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button--minimalist {
    height: min-content;
    padding: 5px;
    background-color: $secondary-section-background;
    color: $tertiary-text-color;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button--primary-min {
    height: min-content;
    width: max-content;
    margin-left: 8px;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: $section-primary-color;
    color: $primary-text-color;
    @media (max-width: 768px) {
        padding: 8px 8px;
    }
     

    &:hover {
        background: $section-secondary-color;
    }

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button--cancel {
    height: min-content;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: $tertiary-text-color;
    background-color: $primary-color;
    border: 1px solid  $disabled-color2;

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button--create {
    height: min-content;
    align-self: center;
    padding: 10px;
    background-color: $section-primary-color;
    color: $primary-text-color;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;

    &:hover {
        background-color: $section-secondary-color;
    }

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}


.button--sidenav {
    background-color: $primary-color;
    color: $tertiary-text-color;
    padding: 8px 8px;
    font-weight: bold;
    border: none;
    display: flex;
    border-radius: 4px;
    cursor: pointer;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    align-items: center;

    &:hover {
        background-color: $secondary-color;
        color: $secondary-text-color;
    }

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button--warn {
    background-color: $warn-secondary-color;
    color: $secondary-color;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: min-content;

    &:hover {
        background-color: red;
    }

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}

.button-container {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;

    &:disabled {
        background-color: $disabled-color2;
        cursor: not-allowed;
    }
}