.bton {
    border: none;
    outline: none;
    appearance: none;
    background: none;
    font-family: Oswald, serif !important;
    padding: var(--variable-1) var(--variable-2);
    border-radius: var(--variable-2);
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
    min-width: var(--w-button);
    transition: all 0.3s ease;

    position: relative;
    /*overflow: hidden;*/

    isolation: isolate;

    &:before {
        border-radius: var(--variable-1);
    }

    &:not([disabled]):hover::before {
        opacity: 0.8;
    }

    & * {
        margin: 0;
        transition: all 0.3s ease;
    }

    &:not([disabled]) span:not(.material-symbols-outlined) {
        padding-right: var(--variable-1);
    }

    &:not([disabled]):hover span:not(.material-symbols-outlined) {
        transform-origin: bottom;
        transform: scale(1.1);
    }

    &:not([disabled]):hover i,
    &:not([disabled]):hover .material-symbols-outlined,
    &:not([disabled]):hover .material-symbols
    {
        transform: rotate(10deg);
    }

    & > i,
    & > .material-symbols-outlined {
        margin-right: var(--variable-1);
    }

    &[disabled] {
        color: var(--color-white);
        background: linear-gradient(45deg, rgba(var(--color-grey-rgb), 1)      0%, 50%, rgba(var(--color-grey-rgb), 0.7)      100%);
        filter: opacity(.7);
        cursor: not-allowed;
    }
}

.bton-xs {
    padding: 0 var(--variable-xs);
    font-size: var(--font-xs);
    min-width: 0;
    height: 22px;
    & > i,
    & > .material-symbols-outlined {
        margin-right: 0;
        scale: 0.75;
    }
}
.bton-sm {
    padding: var(--variable-xs) var(--variable-sm);
    font-size: var(--font-sm);
    min-width: 0;
    height: 28px;
    & > i,
    & > .material-symbols-outlined {
        margin-right: var(--variable-xs);
        scale: 0.8;
    }
}
.bton-md {
    padding: var(--variable-1) var(--variable-2);
    font-size: var(--font-md);
    min-width: 0;
    height: 34px;
    & > i,
    & > .material-symbols-outlined {
        margin-right: var(--variable-1);
    }
}
.bton-lg {
    padding: var(--variable-1) var(--variable-2);
    font-size: var(--font-lg);
    min-width: 0;
    height: 40px;
    & > i,
    & > .material-symbols-outlined {
        margin-right: var(--variable-1);
    }
}
.bton-xl {
    padding: var(--variable-2) var(--variable-3);
    font-size: var(--font-xl);
    min-width: 0;
    height: 48px;
    & > i,
    & > .material-symbols-outlined {
        margin-right: var(--variable-2);
    }
}

.bton-icon {
    padding: var(--variable-1);
    min-width: 0;
    & > i,
    & > .material-symbols-outlined {
        margin: 0;
    }
    &.bton-xs {
        padding: var(--variable-xs);
    }
    & span:not(.material-symbols-outlined){
        display: none;
    }
}
.bton-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;

    & * {
        margin: 0 !important;
        padding: 0 !important;
    }
}

.bton-main:not([disabled]) {
    &:hover {
        color: var(--color-white);
        box-shadow: 0 0 2px 0 var(--color-main) inset, 0 0 5px 5px rgba(var(--color-main-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-main-rgb), 1)      0%, 50%, rgba(var(--color-main-rgb), 0.7)      100%);
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-main);

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-main) inset;
        }
    }
}
.bton-secondary:not([disabled]) {
    &:hover {
        color: var(--color-white);
        box-shadow: 0 0 2px 0 var(--color-secondary) inset, 0 0 5px 5px rgba(var(--color-secondary-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-secondary-rgb), 1) 0%, 50%, rgba(var(--color-secondary-rgb), 0.7) 100%);
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-secondary);

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-secondary) inset;
        }
    }
}
.bton-danger:not([disabled]) {
    &:hover {
        color: var(--color-white);
        box-shadow: 0 0 2px 0 var(--color-danger) inset, 0 0 5px 5px rgba(var(--color-danger-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-danger-rgb), 1)    0%, 50%, rgba(var(--color-danger-rgb), 0.5)    100%);
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-danger);

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-danger) inset;
        }
    }
}
.bton-success:not([disabled]) {
    &:hover {
        color: var(--color-white);
        box-shadow: 0 0 2px 0 var(--color-success) inset, 0 0 5px 5px rgba(var(--color-success-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-success-rgb), 1)   0%, 50%, rgba(var(--color-success-rgb), 0.5)   100%);
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-success);

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-success) inset;
        }
    }
}
.bton-info:not([disabled]) {
    &:hover {
        color: var(--color-white);
        box-shadow: 0 0 2px 0 var(--color-info) inset, 0 0 5px 5px rgba(var(--color-info-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-info-rgb), 1)      0%, 50%, rgba(var(--color-info-rgb), 0.5)      100%);
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-info);

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-info) inset;
        }
    }
}
.bton-warning:not([disabled]) {
    &:hover {
        color: var(--color-white);
        box-shadow: 0 0 2px 0 var(--color-warning) inset, 0 0 5px 5px rgba(var(--color-warning-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-warning-rgb), 1)   0%, 50%, rgba(var(--color-warning-rgb), 0.5)   100%);
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-warning);

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0 0 500px 0 rgba(var(--color-warning-rgb), 0.1) inset;
        }

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-warning) inset;
        }
    }
}
.bton-lightgrey:not([disabled]) {
    color: var(--color-grey);
    &:hover {
        color: var(--color-grey);
        box-shadow: 0 0 2px 0 var(--color-lightgrey) inset, 0 0 5px 5px rgba(var(--color-lightgrey-rgb), .2);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(45deg, rgba(var(--color-lightgrey-rgb), 1)   0%, 50%, rgba(var(--color-lightgrey-rgb), 0.5)   100%);
        opacity: 1;

        transition: all 0.3s ease;
    }

    &:not(.bton-transparent) {
        color: var(--color-white);
    }
    &.bton-transparent {
        color: var(--color-grey);

        &:hover {
            color: var(--color-white);
            box-shadow: 0 0 50px 0 var(--color-grey) inset;
        }
    }
}

.bton-transparent {
    &:before {
        opacity: 0.2 !important;
    }
}

@media (max-width: 767px) {
    .bton-col {
        min-width: 45px;
    }
}

.bton-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;

    & > .bton {
        border-radius: 0;
        margin: 0;
        &:before {
            border-radius: 0;
        }
    }

    & > .bton:first-of-type {
        border-radius: var(--variable-1) 0 0 var(--variable-1);
        &:before {
            border-radius: var(--variable-1) 0 0 var(--variable-1);
        }
    }
    & > .bton:last-of-type {
        border-radius: 0 var(--variable-1) var(--variable-1) 0;
        &:before {
            border-radius: 0 var(--variable-1) var(--variable-1) 0;
        }
    }
    & > .bton:last-of-type:first-of-type {
        border-radius: var(--variable-1);
        &:before {
            border-radius: var(--variable-1);
        }
    }
}