dsql-admin/dsql-app/less/button.less

////////////////////////////////////////
////////////// - Imports - /////////////
////////////////////////////////////////

@import "constants";

////////////////////////////////////////
////////////// - Buttons - /////////////
////////////////////////////////////////

button,
.button {
    // Main Styles
    background-color: lighten(@main_color, 10%);
    color: white;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    line-height: 1.2;
    transition: all 0.2s ease-out;
    font-family: inherit;

    ////////////////////////////////////////

    &:hover {
        background-color: darken(@main_color, 10%);
        color: white;
    }

    ////////////////////////////////////////

    // Combo Styles
    &.white {
        background-color: white;
        color: darken(@main_color, 30%, relative);
        border: 1px solid @slate_200;

        &:hover {
            border: 1px solid @slate_400;
        }
    }

    &.primary-light {
        background-color: lighten(@main_color, 75%, relative);
        color: darken(@main_color, 30%, relative);
    }

    &.dark {
        background-color: @slate_700;
        color: white;

        &:hover {
            background-color: @slate_900;
        }
    }

    &.blue {
        background-color: @blue_color;
        color: white;

        &:hover {
            background-color: darken(@blue_color, 10%);
        }
    }

    &.small-text {
        font-size: 13px;
        padding: 7px 12px;
    }

    &.smallest {
        font-size: 12px;
        padding: 5px 10px;
    }

    &.plain-text {
        background-color: transparent;
        color: @slate_700;
        border: none;

        &:hover {
            background-color: @slate_100;
            color: @slate_600;
            border: none;
        }
    }

    &.more-padding {
        padding: 13px 18px;
    }

    &.normal-weight {
        font-weight: 500;
    }

    &.secondary {
        background-color: @sec_color;
        color: white;

        &:hover {
            background-color: darken(@sec_color, 5%);
            color: white;
        }

        &.outlined {
            background-color: transparent;
            color: darken(@sec_color, 10%);
            border: 1px solid @sec_color;

            &:hover {
                background-color: transparent;
            }
        }
    }

    &.gray {
        background-color: @slate_200;
        color: @slate_600;

        &:hover {
            background-color: @slate_300;
        }
    }

    &.light-gray {
        background-color: @slate_100;
        color: @slate_500;

        &:hover {
            background-color: @slate_200;
        }
    }

    ////////////////////////////////////////

    &.outlined {
        background-color: transparent;
        color: @main_color;
        border: 1px solid lighten(@main_color, 10%);
        outline: 5px solid transparent;

        &:hover {
            outline-color: fade(@slate_600, 8%);
            background-color: transparent;
        }

        &.dashed {
            border-style: dashed;
        }

        &.gray {
            border-color: @slate_300;
            color: @slate_600;
        }

        &.light-gray {
            border-color: @slate_200;
            color: @slate_500;
        }

        &.black {
            border-color: @slate_700;
            color: @slate_900;
        }

        &.light {
            color: white;
            border-color: rgba(255, 255, 255, 0.4);

            &:hover {
                outline-color: rgba(255, 255, 255, 0.07);
            }
        }

        &.warning {
            color: darken(@warning_color, 20%);
            border-color: @warning_color;
        }
    }

    ////////////////////////////////////////

    &.outlined-gray {
        background-color: transparent;
        color: @slate_600;
        border: 1px solid @slate_300;
        outline: 5px solid transparent;

        &:hover {
            outline-color: fade(@slate_500, 10%);
            background-color: transparent;
        }
    }

    ////////////////////////////////////////

    &.ghost {
        background-color: transparent;
        color: inherit;

        &:hover {
            opacity: 0.5;
        }
    }
}

html.dark button,
html.dark .button {
    // Main Styles
    background-color: @main_color;
    color: white;

    ////////////////////////////////////////

    &:hover {
        background-color: darken(@main_color, 10%);
        color: white;
    }

    ////////////////////////////////////////

    &.primary-light {
        background-color: fade(@main_color, 20%);
        color: white;
    }

    &.dark {
        background-color: @slate_700;
        color: white;

        &:hover {
            background-color: @slate_900;
        }
    }

    &.blue {
        background-color: @blue_color;
        color: white;

        &:hover {
            background-color: darken(@blue_color, 10%);
        }
    }

    &.small-text {
        font-size: 13px;
        padding: 7px 12px;
    }

    &.smallest {
        font-size: 12px;
        padding: 5px 10px;
    }

    &.plain-text {
        background-color: transparent;
        color: fade(white, 80%);
        border: none;

        &:hover {
            background-color: fade(@slate_100, 5%);
            color: fade(white, 80%);
            border: none;
        }
    }

    &.more-padding {
        padding: 13px 18px;
    }

    &.normal-weight {
        font-weight: 500;
    }

    &.secondary {
        background-color: darken(@sec_color, 10%);
        color: white;

        &:hover {
            background-color: darken(@sec_color, 12%);
            color: white;
        }

        &.outlined {
            background-color: transparent;
            color: lighten(@sec_color, 30%);
            border: 1px solid fade(@sec_color, 50%);

            &:hover {
                background-color: transparent;
            }
        }
    }

    &.gray {
        background-color: @slate_600;
        color: white;

        &:hover {
            background-color: @slate_500;
        }
    }

    &.light-gray {
        background-color: @slate_700;
        color: fade(white, 70%);
        &:hover {
            background-color: @slate_600;
        }
    }

    &.outlined {
        background-color: transparent;
        color: lighten(@main_color, 20%);
        border: 1px solid fade(@main_color, 50%);
        outline: 5px solid transparent;

        &:hover {
            outline-color: fade(white, 5%);
            background-color: transparent;
        }

        &.dashed {
            border-style: dashed;
        }

        &.gray {
            border-color: fade(@slate_300, 20%);
            color: fade(white, 70%);
        }

        &.light-gray {
            border-color: fade(@slate_300, 10%);
            color: fade(white, 60%);
        }

        &.light {
            color: white;
            border-color: rgba(255, 255, 255, 0.4);

            &:hover {
                outline-color: rgba(255, 255, 255, 0.07);
            }
        }

        &.warning {
            color: lighten(@warning_color, 10%);
            border-color: fade(@warning_color, 30%);
        }
    }

    &.outlined-gray {
        background-color: transparent;
        color: @slate_300;
        border: 1px solid fade(@slate_300, 50%);
        outline: 5px solid transparent;

        &:hover {
            outline-color: fade(@slate_500, 10%);
            background-color: transparent;
        }
    }

    ////////////////////////////////////////
    ////////////////////////////////////////

    svg {
        color: white;
    }

    ////////////////////////////////////////

    &.ghost {
        background-color: transparent;
        color: inherit;

        &:hover {
            opacity: 0.5;
        }
    }
}

////////////////////////////////////////
//////////// - Button Group - //////////
////////////////////////////////////////

// .button-group {
//     gap: 0;

//     ////////////////////////////////////////
//     ////////////////////////////////////////

//     & > button,
//     & > .dropdown > button,
//     & > .button,
//     & > .dropdown > .button {
//         &:first-child {
//             border-top-right-radius: 0;
//             border-bottom-right-radius: 0;
//         }
//         &:last-child {
//             border-top-left-radius: 0;
//             border-bottom-left-radius: 0;
//             outline: 10px solid red;
//         }
//     }
// }