:root{
    --msa-cbt-padding-tb: 16px;
    --msa-cbt-padding-lr: 18px;
    --msa-cbi-padding-tb: 7px;
    --msa-cbi-padding-lr: 8px;
    --msa-cbt-secondary-padding-tb:16px;
    --msa-cbt-secondary-padding-lr: 18px;
    --msa-cbt-border-radius: 8px;
    --msa-cbt-border-radius: 8px;
    --msa-cbi-border-radius: 8px;
    --msa-cbi-border-radius: 8px;
    --msa-cbt-border-right-size: 1px;
    --msa-cbt-border-right-color: #868282;
}

.custom-button {
    display: inline-flex;
    overflow: hidden;
    text-decoration: none;
    border: none;
    background: transparent;
    width: fit-content;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.font-icon-svg{
    width: 16px;
    height: 16px;
}
.btn-text{
    border-right: var(--msa-cbt-border-right-size) solid var(--msa-cbt-border-right-color, #868282);
}

.custom-button .btn-text,
.custom-button .btn-icon {    
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:var(--btn-text-color, var(--color-button-text));
}

.custom-button .btn-icon {    
    background-color: var(--btn-icon-bg);
}

.custom-button .btn-text{
    background-color: var(--btn-text-bg);
}

.custom-button .btn-text{
    padding: var(--msa-cbt-padding-tb) var(--msa-cbt-padding-lr);
    border-top-left-radius: var(--msa-cbt-border-radius);
    border-bottom-left-radius: var(--msa-cbt-border-radius);
}
.custom-button .btn-icon{
    padding: var(--msa-cbi-padding-tb) var(--msa-cbi-padding-lr);
    border-top-right-radius: var(--msa-cbi-border-radius);
    border-bottom-right-radius: var(--msa-cbi-border-radius);
}

.custom-button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}