
.btn-theme {
    background-color: var(--theme-color);
    color: #fff;
    &:hover {
        background-color: var(--theme-color);
        color: #fff;
    }
}
.btn-ghost {
    background-color: var(--#{$variable-prefix}gray-200);
    color: inherit;

    &:hover {
        color: #fff;
        background-color: var(--theme-color);
    }
}
.btn-transparent {
    background-color: rgba(#fff,.1);
    &:hover {
    background-color: rgba(#fff,.25);
    }
}
.btn-service.active {
        background-color: var(--theme-color);
        color: #fff;
}
//
// Button square
//

.btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $btn-square-width;
    height: $btn-square-width;
    padding: 0;

    &.btn-xs {
        width: $btn-square-width-xs;
        height: $btn-square-width-xs;
    }

    &.btn-sm {
        width: $btn-square-width-sm;
        height: $btn-square-width-sm;
    }

    &.btn-lg {
        width: $btn-square-width-lg;
        height: $btn-square-width-lg;
    }

    &.btn-xl {
        width: $btn-square-width-xl;
        height: $btn-square-width-xl;
    }

    &.btn-2xl {
        width: $btn-square-width-2xl;
        height: $btn-square-width-2xl;
    }
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .btn-inner-text:not(:first-child) {
        margin-left: .75em;
    }

    .btn-inner-text:not(:last-child) {
        margin-right: .75em;
    }

    .btn-inner-icon {
        svg {
            
    vertical-align: -2px;
        }
    }
}