/* @define Btn */

.Btn.is-small {
    font-size: 0.75rem;
    padding: 2px 4px;
}

.Btn-close:hover {
    background: rgb(0 0 0 / 20%);
}

.Btn-link {
    user-select: text;
}

.Btn-link:hover,
.Btn-link:active {
    color: var(--primary) !important;
    text-decoration: underline;
}

.Btn--linkOutline {
    border: 1px solid var(--border-subtle);
}

/* Using !important so that custom styles are not overridden by dayshape-bootstrap.css */
.Btn--linkOutline:hover,
.Btn--linkOutline:focus,
.Btn--linkOutline:active {
    background-color: var(--white) !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

/* Tertiary button */
.Btn-tertiary {
    background-color: var(--surface-container-default);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* stylelint-disable-next-line plugin/selector-bem-pattern */
.Btn-tertiary.disabled,
.Btn-tertiary:disabled {
    background-color: var(--surface-disabled-light);
    border-color: var(--border-disabled-dark);
    color: var(--text-disabled);
    opacity: 1;
}

.Btn-tertiary:not(:disabled, .disabled):hover {
    background-color: var(--surface-container-hover);
    border-color: var(--border-default);
    color: var(--text-primary-strong);
}

.Btn-tertiary:not(:disabled, .disabled):focus {
    background-color: var(--surface-container-default);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.Btn-tertiary:not(:disabled, .disabled):active {
    background-color: var(--surface-container-selected);
    border-color: var(--border-default);
    color: var(--text-primary-strong);
}

/* Tertiary button END */