.d-none {display: none !important;}

.talign-center {text-align: center;}
.talign-end {text-align: end;}
.talign-start {text-align: start;}

img, svg {
    vertical-align: middle
}

hr {
    background-color: var(--fnd-border-color);
    height: 1px;
    border: 0;
    margin: 0;
}

/* region space colors */
.space-bg-fg {
    color: var(--btn-fg-color) !important;
    background-color: var(--btn-bg-color) !important;
}
.space-fg {
    color: var(--btn-fg-color) !important;
}

.space-fg :where(i, span, p), .space-bg-fg :where(i, span, p) {
    color: var(--btn-fg-color) !important;
}

.color-accent-1 {
    --btn-bg-color: var(--fnd-accent-1-color);
    --btn-fg-color: var(--fnd-on-accent-1-color);
}

.color-accent-2 {
    --btn-bg-color: var(--fnd-accent-2-color);
    --btn-fg-color: var(--fnd-on-accent-2-color);
}

.color-neutral-1 {
    --btn-bg-color: var(--fnd-neutral-1-color);
    --btn-fg-color: var(--fnd-on-neutral-1-color);
}

.color-neutral-1-with-danger {
    --btn-bg-color: var(--fnd-neutral-1-color);
    --btn-fg-color: var(--fnd-on-danger-color);
}

.color-neutral-1-hover {
    --btn-bg-color: light-dark(color-mix(in lab, black 5%, var(--fnd-neutral-1-color)), color-mix(in lab, white 5%, var(--fnd-neutral-1-color)));
    --btn-fg-color: var(--fnd-on-neutral-1-color);

    --btn-bg-hover-color: light-dark(color-mix(in lab, black 10%, var(--btn-bg-color)), color-mix(in lab, white 10%, var(--btn-bg-color)));
    --btn-fg-hover-color: var(--btn-fg-color);
}

.color-surface-1 {
    --btn-bg-color: var(--fnd-surface-1);
    --btn-fg-color: var(--fnd-text-color);

    --btn-bg-hover-color: light-dark(color-mix(in lab, black 5%, var(--fnd-neutral-1-color)), color-mix(in lab, white 5%, var(--fnd-neutral-1-color)));
    --btn-fg-hover-color: var(--fnd-on-neutral-1-color);
}

.color-surface-2 {
    --btn-bg-color: var(--fnd-surface-2);
    --btn-fg-color: var(--fnd-text-color);

    --btn-bg-hover-color: light-dark(color-mix(in lab, black 5%, var(--fnd-neutral-1-color)), color-mix(in lab, white 5%, var(--fnd-neutral-1-color)));
    --btn-fg-hover-color: var(--fnd-on-neutral-1-color);
}

.color-background-1 {
    --btn-bg-color: var(--fnd-background-1);
    --btn-fg-color: var(--fnd-text-color);

    --btn-bg-hover-color: light-dark(color-mix(in lab, black 5%, var(--fnd-background-1)), color-mix(in lab, white 5%, var(--fnd-background-1)));
    --btn-fg-hover-color: var(--fnd-text-color);
}

.color-success {
    --btn-bg-color: var(--fnd-success-color);
    --btn-fg-color: var(--fnd-on-success-color);
}

.color-danger {
    --btn-bg-color: var(--fnd-danger-color);
    --btn-fg-color: var(--fnd-on-danger-color);
}

.color-warning {
    --btn-bg-color: var(--fnd-warning-color);
    --btn-fg-color: var(--fnd-on-warning-color);
}

.color-red {
    --btn-fg-color: var(--fnd-red-color);
}

.color-green {
    --btn-fg-color: var(--fnd-green-color);
}

.color-loader {
    --btn-bg-color: var(--fnd-neutral-1-color);
    --btn-fg-color: var(--fnd-on-neutral-1-color);

    --btn-bg-hover-color: var(--fnd-neutral-1-color);
    --btn-fg-hover-color: var(--fnd-on-neutral-1-color);
}
/* endregion */