/* .bd-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #3E82E5;
    color: #FFFFFF;
    border-radius: 3px;
    padding: 4px 8px;
    transition: background-color 0.17s ease, color 0.17s ease, opacity 250ms ease;
}

.bd-button:hover {
    background-color: #3875CE;
}

.bd-button:active {
    background-color: #3268B7;
}

.bd-button.bd-button-success {
    background-color: #43B581;
}

.bd-button.bd-button-success:hover {
    background-color: #3CA374;
}

.bd-button.bd-button-success:active {
    background-color: #369167;
}

.bd-button.bd-button-warning {
    background-color: #FAA61A;
}

.bd-button.bd-button-warning:hover {
    background-color: #E19517;
}

.bd-button.bd-button-warning:active {
    background-color: #C88515;
}

.bd-button.bd-button-danger {
    background-color: #F04747;
}

.bd-button.bd-button-danger:hover {
    background-color: #D84040;
}

.bd-button.bd-button-danger:active {
    background-color: #C03939;
}

.bd-button-disabled {
    opacity: 0.4;
}

.bd-button-disabled:hover {
    cursor: not-allowed;
} */











/* Generic Button Styles */
.bd-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    padding: 2px 16px;
    user-select: none;
}

.bd-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bd-button .bd-button-content {
    --button--underline-color: transparent;
    background-image: linear-gradient(0deg, transparent, transparent 1px, var(--button--underline-color) 0, var(--button--underline-color) 2px, transparent 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bd-button:disabled .bd-button-content {
    background-image: none !important;
}

.bd-button-outlined:disabled {
    background-color: transparent !important;
}



/* Button Sizes */
.bd-button-tiny {
    width: 52px;
    height: 24px;
    min-width: 52px;
    min-height: 24px;
}

.bd-button-small {
    width: 60px;
    height: 32px;
    min-width: 60px;
    min-height: 32px;
}

.bd-button-medium {
    width: 96px;
    height: 38px;
    min-width: 96px;
    min-height: 38px;
}

.bd-button-large {
    width: 130px;
    height: 44px;
    min-width: 130px;
    min-height: 44px;
}

.bd-button-xlarge {
    width: 148px;
    height: 50px;
    min-width: 148px;
    min-height: 50px;
    font-size: 16px;
    line-height: normal;
    padding: 2px 20px;
}

.bd-button-icon {
    height: auto;
    padding: 4px;
}

.bd-button-grow,
.bd-button-icon {
    width: auto
}



/* Button Looks */
.bd-button-filled {
    -webkit-transition: background-color .17s ease, color .17s ease;
    transition: background-color .17s ease, color .17s ease
}

.bd-button-outlined {
    -webkit-transition: color .17s ease, background-color .17s ease, border-color .17s ease;
    transition: color .17s ease, background-color .17s ease, border-color .17s ease;
    border-width: 1px;
    border-style: solid
}

.bd-button-blank {
    background: transparent;
    color: currentColor;
    border: 0;
    /* padding: 0; */
    margin: 0
}

.bd-button-filled .bd-button-content,
.bd-button-link .bd-button-content,
.bd-button-outlined .bd-button-content {
    margin: 0 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


/* COLORS */

/* Color BD Brand */
.bd-button-filled.bd-button-color-brand {
    color: var(--white-500);
    background-color: #3E82E5; /* BD Blue */
}

.bd-button-filled.bd-button-color-brand:hover {
    background-color: #3875CE;
}

.bd-button-filled.bd-button-color-brand:active {
    background-color: #3268B7;
}

.bd-button-filled.bd-button-color-brand:disabled {
    background-color: #3E82E5; /* BD Blue */
    opacity: 0.4;
}

.bd-button-outlined.bd-button-color-brand {
    color: var(--button-outline-brand-text);
    border-color: var(--button-outline-brand-border);
}

.bd-button-outlined.bd-button-color-brand:hover {
    background-color: var(--button-outline-brand-background-hover);
    border-color: var(--button-outline-brand-border-hover);
    color: var(--button-outline-brand-text-hover);
}

.bd-button-outlined.bd-button-color-brand:active {
    background-color: var(--button-outline-brand-background-active);
    border-color: var(--button-outline-brand-border-active);
    color: var(--button-outline-brand-text-active);
}

.bd-button-link.bd-button-color-brand {
    color: #3E82E5; /* BD Blue */
}

.bd-button-link.bd-button-color-brand:hover .bd-button-content {
    --button--underline-color: #3E82E5; /* BD Blue */
}



/* Color Blurple */
.bd-button-filled.bd-button-color-blurple {
    color: var(--white-500);
    background-color: var(--brand-experiment)
}

.bd-button-filled.bd-button-color-blurple:hover {
    background-color: var(--brand-experiment-560)
}

.bd-button-filled.bd-button-color-blurple:active {
    background-color: var(--brand-experiment-600)
}

.bd-button-filled.bd-button-color-blurple:disabled {
    background-color: var(--brand-experiment)
}

.bd-button-outlined.bd-button-color-blurple {
    color: var(--button-outline-brand-text);
    border-color: var(--button-outline-brand-border)
}

.bd-button-outlined.bd-button-color-blurple:hover {
    background-color: var(--button-outline-brand-background-hover);
    border-color: var(--button-outline-brand-border-hover);
    color: var(--button-outline-brand-text-hover)
}

.bd-button-outlined.bd-button-color-blurple:active {
    background-color: var(--button-outline-brand-background-active);
    border-color: var(--button-outline-brand-border-active);
    color: var(--button-outline-brand-text-active)
}

.bd-button-link.bd-button-color-blurple {
    color: var(--brand-experiment)
}

.bd-button-link.bd-button-color-blurple:hover .bd-button-content {
    --button--underline-color: var(--brand-experiment)
}



/* Color Yellow/Warn */
.bd-button-filled.bd-button-color-yellow {
    color: var(--white-500);
    background-color: var(--status-warning)
}

.bd-button-filled.bd-button-color-yellow:active,
.bd-button-filled.bd-button-color-yellow:hover {
    background-color: null;
}

.bd-button-filled.bd-button-color-yellow:disabled {
    background-color: var(--status-warning)
}

.bd-button-outlined.bd-button-color-yellow {
    color: var(--status-warning);
    border-color: var(--status-warning)
}

.bd-button-outlined.bd-button-color-yellow:active {
    background-color: hsl(var(--yellow-300-hsl)/.1)
}

.bd-button-link.bd-button-color-yellow {
    color: var(--status-warning)
}

.bd-button-link.bd-button-color-yellow:hover .bd-button-content {
    --button--underline-color: var(--status-warning)
}



/* Color Link */
.bd-button-filled.bd-button-color-link {
    color: var(--white-500);
    background-color: var(--text-link)
}

.bd-button-filled.bd-button-color-link:active,
.bd-button-filled.bd-button-color-link:hover {
    background-color: null
}

.bd-button-filled.bd-button-color-link:disabled {
    background-color: var(--text-link)
}

.bd-button-outlined.bd-button-color-link {
    color: var(--text-link);
    border-color: var(--text-link)
}

.bd-button-outlined.bd-button-color-link:active {
    background-color: hsl(var(--text-link-hsl)/.1)
}

.bd-button-link.bd-button-color-link {
    color: var(--text-link)
}

.bd-button-link.bd-button-color-link:hover .bd-button-content {
    --button--underline-color: var(--text-link)
}



/* Color White */
.bd-button-filled.bd-button-color-white {
    color: var(--primary-500);
    background-color: var(--white-500)
}

.bd-button-filled.bd-button-color-white:active,
.bd-button-filled.bd-button-color-white:hover {
    background-color: null
}

.bd-button-filled.bd-button-color-white:disabled {
    background-color: var(--white-500)
}

.bd-button-outlined.bd-button-color-white {
    color: var(--white-500);
    border-color: var(--white-500)
}

.bd-button-outlined.bd-button-color-white:active {
    background-color: hsl(var(--white-500-hsl)/.1)
}

.bd-button-link.bd-button-color-white {
    color: var(--white-500)
}

.bd-button-link.bd-button-color-white:hover .bd-button-content {
    --button--underline-color: var(--white-500)
}



/* Color Red/Danger/Error */
.bd-button-filled.bd-button-color-red {
    color: var(--white-500);
    background-color: var(--button-danger-background)
}

.bd-button-filled.bd-button-color-red:hover {
    background-color: var(--button-danger-background-hover)
}

.bd-button-filled.bd-button-color-red:active {
    background-color: var(--button-danger-background-active)
}

.bd-button-filled.bd-button-color-red:disabled {
    background-color: var(--button-danger-background-disabled)
}

.bd-button-outlined.bd-button-color-red {
    color: var(--button-outline-danger-text);
    border-color: var(--button-outline-danger-border)
}

.bd-button-outlined.bd-button-color-red:hover {
    background-color: var(--button-outline-danger-background-hover);
    border-color: var(--button-outline-danger-border-hover);
    color: var(--button-outline-danger-text-hover)
}

.bd-button-outlined.bd-button-color-red:active {
    background-color: var(--button-outline-danger-background-active);
    border-color: var(--button-outline-danger-border-active);
    color: var(--button-outline-danger-text-active)
}

.bd-button-link.bd-button-color-red {
    color: var(--text-danger)
}

.bd-button-link.bd-button-color-red:hover .bd-button-content {
    --button--underline-color: var(--text-danger)
}


/* Color Green Success */
.bd-button-filled.bd-button-color-green {
    color: var(--white-500);
    background-color: var(--button-positive-background)
}

.bd-button-filled.bd-button-color-green:hover {
    background-color: var(--button-positive-background-hover)
}

.bd-button-filled.bd-button-color-green:active {
    background-color: var(--button-positive-background-active)
}

.bd-button-filled.bd-button-color-green:disabled {
    background-color: var(--button-positive-background-disabled)
}

.bd-button-outlined.bd-button-color-green {
    color: var(--button-outline-positive-text);
    border-color: var(--button-outline-positive-border)
}

.bd-button-outlined.bd-button-color-green:hover {
    background-color: var(--button-outline-positive-background-hover);
    border-color: var(--button-outline-positive-border-hover);
    color: var(--button-outline-positive-text-hover)
}

.bd-button-outlined.bd-button-color-green:active {
    background-color: var(--button-outline-positive-background-active);
    border-color: var(--button-outline-positive-border-active);
    color: var(--button-outline-positive-text-active)
}

.bd-button-link.bd-button-color-green {
    color: var(--green-360)
}

.bd-button-link.bd-button-color-green:hover .bd-button-content {
    --button--underline-color: var(--green-360)
}



/* Color Primary/Grey */
.bd-button-outlined.bd-button-color-primary {
    color: var(--button-outline-primary-text);
    border-color: var(--button-outline-primary-border)
}

.bd-button-outlined.bd-button-color-primary:hover {
    background-color: var(--button-outline-primary-background-hover);
    border-color: var(--button-outline-primary-border-hover);
    color: var(--button-outline-primary-text-hover)
}

.bd-button-outlined.bd-button-color-primary:active {
    background-color: var(--button-outline-primary-background-active);
    border-color: var(--button-outline-primary-border-active);
    color: var(--button-outline-primary-text-active)
}

.bd-button-filled.bd-button-color-primary {
    color: var(--white-500);
    background-color: var(--button-secondary-background)
}

.bd-button-filled.bd-button-color-primary:hover {
    background-color: var(--button-secondary-background-hover)
}

.bd-button-filled.bd-button-color-primary:active {
    background-color: var(--button-secondary-background-active)
}

.bd-button-filled.bd-button-color-primary:disabled {
    background-color: var(--button-secondary-background-disabled)
}

.theme-dark .bd-button-link.bd-button-color-primary {
    color: var(--white-500)
}

.theme-dark .bd-button-link.bd-button-color-primary:hover .bd-button-content {
    --button--underline-color: var(--white-500)
}

.theme-light .bd-button-link.bd-button-color-primary {
    color: var(--primary-400)
}

.theme-light .bd-button-link.bd-button-color-primary:hover .bd-button-content {
    --button--underline-color: var(--primary-400)
}



/* Color Transparent */
.theme-dark .bd-button-filled.bd-button-color-transparent {
    color: var(--primary-100);
    background-color: hsl(var(--white-500-hsl)/.1)
}

.theme-dark .bd-button-filled.bd-button-color-transparent:hover {
    background-color: hsl(var(--white-500-hsl)/.05)
}

.theme-dark .bd-button-filled.bd-button-color-transparent:active {
    background-color: hsl(var(--white-500-hsl)/.01)
}

.theme-dark .bd-button-filled.bd-button-color-transparent:disabled {
    background-color: hsl(var(--white-500-hsl)/.1)
}

.theme-dark .bd-button-outlined.bd-button-color-transparent {
    color: var(--primary-200);
    border-color: var(--primary-200)
}

.theme-dark .bd-button-outlined.bd-button-color-transparent:active {
    background-color: hsl(var(--primary-200-hsl)/.1)
}

.theme-dark .bd-button-link.bd-button-color-transparent {
    color: var(--primary-200)
}

.theme-dark .bd-button-link.bd-button-color-transparent:hover .bd-button-content {
    --button--underline-color: var(--primary-200)
}

.theme-light .bd-button-filled.bd-button-color-transparent {
    color: var(--primary-400);
    background-color: hsl(var(--primary-400-hsl)/.01)
}

.theme-light .bd-button-filled.bd-button-color-transparent:hover {
    background-color: hsl(var(--primary-400-hsl)/.2)
}

.theme-light .bd-button-filled.bd-button-color-transparent:active {
    background-color: hsl(var(--primary-400-hsl)/.25)
}

.theme-light .bd-button-filled.bd-button-color-transparent:disabled {
    background-color: hsl(var(--primary-400-hsl)/.01)
}

.theme-light .bd-button-outlined.bd-button-color-transparent {
    color: var(--primary-400);
    border-color: var(--primary-400)
}

.theme-light .bd-button-outlined.bd-button-color-transparent:active {
    background-color: hsl(var(--primary-400-hsl)/.1)
}

.theme-light .bd-button-link.bd-button-color-transparent {
    color: var(--primary-400)
}

.theme-light .bd-button-link.bd-button-color-transparent:hover .bd-button-content {
    --button--underline-color: var(--primary-400)
}