.ds-btn {
    border-width: $border1;
    border-radius: $borderRadius8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    outline: none !important;
    &.h-sm {
        height: $spacing32;
        padding: $spacing4 $spacing12 $spacing4 $spacing12;
    }

    &.h-md {
        height: $spacing40;
        padding: $spacing8 $spacing16 $spacing8 $spacing16;

    }

    &.h-lg {
        height: $spacing44;
        padding: $spacing8 $spacing16 $spacing8 $spacing16;
    }

    &:disabled {
        cursor: not-allowed;
    }
}

.ds-btn-link {
    border: none;
    background: none !important;
    fa-icon {
        text-decoration: none !important;
    }

    &.ds-btn-link-underline {
        text-decoration: underline;
    }

    &:disabled {
        color: var(--gray600);
    } 
}


.ds-btn-primary {
    border: none;
    background-color: var(--primaryColorMain);
    color: var(--gray00);
    &:hover {
        background-color: var(--primaryColorMain);
    }
    &:active, &:focus {
        border-width: $border2;
        border-color: var(--primaryColorExtraLight);
        background-color: var(--primaryColorMain);
    }
    &:disabled {
        border: none;
        background-color: var(--gray500);
        color: var(--gray01);
    }
}

.ds-btn-primary-flat {
    border: none;
    background-color: var(--primaryColorExtraLight);
    color: var(--primaryColorDark);
    &:hover {
        border: $border1e5 var(--primaryColorMain) solid;
    }
    &:disabled {
        border: none;
    }
}

.ds-btn-primary-ghost {
    border-width: $border1e5 !important;
    border-style: solid !important;
    border-color: var(--primaryColorMain);
    background: none;
    color: var(--primaryColorMain);
    &:hover {
        color: var(--primaryColorMain);
        text-decoration: underline;
    }
}

.ds-btn-primary-link {
    border: none;
    background: none !important;
    color: var(--primaryColorMain);
    fa-icon {
        text-decoration: none !important;
    }

    &:disabled {
        color: var(--gray600);
    }
}

.ds-btn-success {
    border: none;
    background-color: var(--successColorDark);
    color: var(--gray00);
    &:hover {
        background-color: var(--successColorMain);
    }
    &:active, &:focus {
        border-width: $border2;
        border-color: var(--successColorExtraLight);
        background-color: var(--successColorDark);
    }
    &:disabled {
        border: none;
        background-color: var(--gray500);
        color: var(--gray01);
    }
}

.ds-btn-success-flat {
    border: none;
    background-color: var(--successColorExtraLight);
    color: var(--successColorMain);
    &:hover {
        border: $border1e5 var(--successColorMain) solid;
    }
    &:disabled {
        border: none;
    }
}

.ds-btn-success-ghost {
    border-width: $border1e5 !important;
    border-style: solid !important;
    border-color: var(--successColorDark);
    background: none;
    color: var(--successColorDark);
    &:hover {
        border: 0 !important;
        color: var(--successColorMain);
        text-decoration: underline;
    }
}

.ds-btn-success-link {
    border: none;
    background: none !important;
    color: var(--successColorDark);
    fa-icon {
        text-decoration: none !important;
    }

    &:disabled {
        color: var(--gray600);
    }
}

.ds-btn-error {
    border: none;
    background-color: var(--errorColorDark);
    color: var(--gray00);
    &:hover {
        background-color: var(--errorColorMain);
    }
    &:active, &:focus {
        border-width: $border2;
        border-color: var(--errorColorExtraLight);
        background-color: var(--errorColorDark);
    }
    &:disabled {
        border: none;
        background-color: var(--gray500);
        color: var(--gray01);
    }
}

.ds-btn-error-flat {
    border: none;
    background-color: var(--errorColorExtraLight);
    color: var(--errorColorDark);
    &:hover {
        border: $border1e5 var(--errorColorMain) solid;
    }
    &:disabled {
        border: none;
    }
}

.ds-btn-error-ghost {
    border-width: $border1e5 !important;
    border-style: solid !important;
    border-color: var(--errorColorDark);
    background: none;
    color: var(--errorColorDark);
    &:hover {
        border: 0 !important;
        color: var(--errorColorMain);
        text-decoration: underline;
    }
}

.ds-btn-error-link {
    border: none;
    background: none !important;
    color: var(--errorColorDark);
    fa-icon {
        text-decoration: none !important;
    }
    &:disabled {
        color: var(--gray600);
    }
}

.ds-btn-info {
    border: none;
    background-color: var(--infoColorMain);
    color: var(--gray00);
    &:hover {
        background-color: var(--infoColorMain);
    }
    &:active, &:focus {
        border-width: $border2;
        border-color: var(--infoColorExtraLight);
        background-color: var(--infoColorMain);
    }
    &:disabled {
        border: none;
        background-color: var(--gray500);
        color: var(--gray01);
    }
}

.ds-btn-info-flat {
    border: none;
    background-color: var(--infoColorExtraLight);
    color: var(--infoColorMain);
    &:hover {
        border: $border1e5 var(--infoColorMain) solid;
    }
    &:disabled {
        border: none;
    }
}

.ds-btn-info-ghost {
    border-width: $border1e5 !important;
    border-style: solid !important;
    border-color: var(--infoColorDark);
    background: none;
    color: var(--infoColorDark);
    &:hover {
        border: 0 !important;
        color: var(--infoColorMain);
        text-decoration: underline;
    }
}

.ds-btn-info-link {
    border: none;
    background: none !important;
    color: var(--infoColorDark);
    fa-icon {
        text-decoration: none !important;
    }
    &:disabled {
        color: var(--gray600);
    }
}