.lds-button {
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    line-height: 1.375rem !important;
    font-family: Heebo !important;
    letter-spacing: 0.015625rem !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 15px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

.lds-button.disabled,
.lds-button[disabled="disabled"],
.lds-button[disabled],
.lds-button.inactive {
    opacity: 1;
    cursor: default !important;
}

.lds-icon {
    display: block;
    border-radius: 50% !important;
    color: var(--lds-color-icon-base);
}

.lds-icon-button {
    padding: 4px;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 50% !important;
    color: var(--lds-color-icon-base);
    cursor: pointer;
    border: none;
    background-color: transparent;
    height: 2rem;
    position: relative;
}

    .lds-icon-button .lds-icon {
        display: inline-block;
    }

    .lds-icon-button:hover {
        background-color: var(--lds-color-interaction-hover);
    }

    .lds-icon-button:focus {
        background-color: var(--lds-color-interaction-focus);
    }

    .lds-icon-button:active {
        background-color: var(--lds-color-interaction-focus);
    }

.lds-button-basic {
    color: var(--lds-color-font-base) !important;
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 12px;
}

    .lds-button-basic:hover {
        background-color: var(--lds-color-interaction-hover) !important;
    }

    .lds-button-basic:active {
        background-color: var(--lds-color-interaction-focus) !important;
    }

.lds-button-basic-primary {
    color: var(--lds-brand-color-font-primary-base) !important;
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 12px !important;
}

    .lds-button-basic-primary:hover {
        background-color: var(--lds-brand-color-interaction-primary-hover) !important;
    }

    .lds-button-basic-primary:active {
        background-color: var(--lds-brand-color-interaction-primary-focus) !important;
    }

.lds-button-filled-primary {
    border: none !important;
    background-color: var(--lds-brand-color-primary) !important;
    color: var(--lds-brand-color-on-primary) !important;
}

    .lds-button-filled-primary:hover {
        background-color: var(--lds-brand-color-primary-hover) !important;
    }

    .lds-button-filled-primary:active {
        background-color: var(--lds-brand-color-primary) !important;
    }

    .lds-button-filled-primary.disabled,
    .lds-button-filled-primary[disabled="disabled"],
    .lds-button-filled-primary[disabled],
    .lds-button-filled-primary.inactive {
        color: var(--lds-color-font-disabled) !important;
        border: none !important;
        background-color: var(--lds-color-neutral-transparent-300) !important;
    }

.lds-button-stroked {
    border: 1px solid var(--lds-color-border-dark);
    background-color: var(--lds-color-background-base);
    color: var(--lds-color-font-base);
}

    .lds-button-stroked:hover {
        background-color: var(--lds-color-interaction-hover);
    }

    .lds-button-stroked:active {
        background-color: var(--lds-color-interaction-focus);
    }

    .lds-button-stroked.disabled,
    .lds-button-stroked[disabled="disabled"],
    .lds-button-stroked[disabled],
    .lds-button-stroked.inactive {
        color: var(--lds-color-font-disabled) !important;
        border: solid 1px var(--lds-color-border-disabled) !important;
        background-color: var(--lds-color-background-base) !important;
    }

.lds-button-stroked-primary {
    border: 1px solid var(--lds-color-border-dark);
    background-color: var(--lds-color-background-base);
    color: var(--lds-brand-color-font-primary-base);
}

    .lds-button-stroked-primary:hover {
        background-color: var(--lds-brand-color-interaction-primary-hover);
    }

    .lds-button-stroked-primary:active {
        background-color: var(--lds-brand-color-interaction-primary-focus);
    }

    .lds-button-stroked-primary.disabled,
    .lds-button-stroked-primary[disabled="disabled"],
    .lds-button-stroked-primary[disabled],
    .lds-button-stroked-primary.inactive {
        color: var(--lds-color-font-disabled);
        border: solid 1px var(--lds-color-border-disabled);
        background-color: var(--lds-color-background-base);
    }

.lds-button-with-icon {
    display: flex;
    align-items: center;
    column-gap: 4px;
}

.lds-button-basic-primary.lds-button-with-icon .lds-icon {
    color: var(--lds-brand-color-font-primary-base);
}

@media only screen and (max-width: 780px) {
    .lds-button {
        height: 40px !important;
        min-height: 40px !important;
    }

    .lds-icon-button {
        position: relative;
    }
    /*Using Pseudo Element To Increase The Clickable Area*/
        .lds-icon-button:after {
            content: '';
            position: absolute;
            left: -8px;
            top: -8px;
            width: 3rem;
            height: 3rem;
        }   
}