.box {
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    vertical-align: baseline;
    background-color: transparent;
    list-style: none;
}

pre.box {
    font-family: var(--reactist-font-family-monospace);
}

.box[hidden] {
    display: none !important;
}

/* position */
.position-absolute {
    position: absolute;
}
.position-fixed {
    position: fixed;
}
.position-relative {
    position: relative;
}
.position-sticky {
    position: sticky;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-position-absolute {
        position: absolute;
    }
    .tablet-position-fixed {
        position: fixed;
    }
    .tablet-position-relative {
        position: relative;
    }
    .tablet-position-sticky {
        position: sticky;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-position-absolute {
        position: absolute;
    }
    .desktop-position-fixed {
        position: fixed;
    }
    .desktop-position-relative {
        position: relative;
    }
    .desktop-position-sticky {
        position: sticky;
    }
}

/* display */
.display-block {
    display: block;
}
.display-flex {
    display: flex;
}
.display-inline {
    display: inline;
}
.display-inlineBlock {
    display: inline-block;
}
.display-inlineFlex {
    display: inline-flex;
}
.display-none {
    display: none;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-display-block {
        display: block;
    }
    .tablet-display-flex {
        display: flex;
    }
    .tablet-display-inline {
        display: inline;
    }
    .tablet-display-inlineBlock {
        display: inline-block;
    }
    .tablet-display-inlineFlex {
        display: inline-flex;
    }
    .tablet-display-none {
        display: none;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-display-block {
        display: block;
    }
    .desktop-display-flex {
        display: flex;
    }
    .desktop-display-inline {
        display: inline;
    }
    .desktop-display-inlineBlock {
        display: inline-block;
    }
    .desktop-display-inlineFlex {
        display: inline-flex;
    }
    .desktop-display-none {
        display: none;
    }
}

/* flex-direction */
.flexDirection-column {
    flex-direction: column;
}
.flexDirection-row {
    flex-direction: row;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-flexDirection-column {
        flex-direction: column;
    }
    .tablet-flexDirection-row {
        flex-direction: row;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-flexDirection-column {
        flex-direction: column;
    }
    .desktop-flexDirection-row {
        flex-direction: row;
    }
}

/* flex-wrap */
.flexWrap-wrap {
    flex-wrap: wrap;
}
.flexWrap-nowrap {
    flex-wrap: nowrap;
}

/* flex-shrink */
.flexShrink-0 {
    flex-shrink: 0;
}

/* flex-grow */
.flexGrow-0 {
    flex-grow: 0;
}
.flexGrow-1 {
    flex-grow: 1;
}

/* align-items */
.alignItems-flexStart {
    align-items: flex-start;
}
.alignItems-center {
    align-items: center;
}
.alignItems-flexEnd {
    align-items: flex-end;
}
.alignItems-baseline {
    align-items: baseline;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-alignItems-flexStart {
        align-items: flex-start;
    }
    .tablet-alignItems-center {
        align-items: center;
    }
    .tablet-alignItems-flexEnd {
        align-items: flex-end;
    }
    .tablet-alignItems-baseline {
        align-items: baseline;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-alignItems-flexStart {
        align-items: flex-start;
    }
    .desktop-alignItems-center {
        align-items: center;
    }
    .desktop-alignItems-flexEnd {
        align-items: flex-end;
    }
    .desktop-alignItems-baseline {
        align-items: baseline;
    }
}

/* justify-content */
.justifyContent-flexStart {
    justify-content: flex-start;
}
.justifyContent-center {
    justify-content: center;
}
.justifyContent-flexEnd {
    justify-content: flex-end;
}
.justifyContent-spaceAround {
    justify-content: space-around;
}
.justifyContent-spaceBetween {
    justify-content: space-between;
}
.justifyContent-spaceEvenly {
    justify-content: space-evenly;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-justifyContent-flexStart {
        justify-content: flex-start;
    }
    .tablet-justifyContent-center {
        justify-content: center;
    }
    .tablet-justifyContent-flexEnd {
        justify-content: flex-end;
    }
    .tablet-justifyContent-spaceAround {
        justify-content: space-around;
    }
    .tablet-justifyContent-spaceBetween {
        justify-content: space-between;
    }
    .tablet-justifyContent-spaceEvenly {
        justify-content: space-evenly;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-justifyContent-flexStart {
        justify-content: flex-start;
    }
    .desktop-justifyContent-center {
        justify-content: center;
    }
    .desktop-justifyContent-flexEnd {
        justify-content: flex-end;
    }
    .tablet-justifyContent-spaceAround {
        justify-content: space-around;
    }
    .desktop-justifyContent-spaceBetween {
        justify-content: space-between;
    }
    .tablet-justifyContent-spaceEvenly {
        justify-content: space-evenly;
    }
}

/* align-self */
.alignSelf-stretch {
    align-self: stretch;
}
.alignSelf-flexStart {
    align-self: flex-start;
}
.alignSelf-center {
    align-self: center;
}
.alignSelf-flexEnd {
    align-self: flex-end;
}
.alignSelf-baseline {
    align-self: baseline;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-alignSelf-stretch {
        align-self: stretch;
    }
    .tablet-alignSelf-flexStart {
        align-self: flex-start;
    }
    .tablet-alignSelf-center {
        align-self: center;
    }
    .tablet-alignSelf-flexEnd {
        align-self: flex-end;
    }
    .tablet-alignSelf-baseline {
        align-self: baseline;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-alignSelf-stretch {
        align-self: stretch;
    }
    .desktop-alignSelf-flexStart {
        align-self: flex-start;
    }
    .desktop-alignSelf-center {
        align-self: center;
    }
    .desktop-alignSelf-flexEnd {
        align-self: flex-end;
    }
    .desktop-alignSelf-baseline {
        align-self: baseline;
    }
}

/* overflow */
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.overflow-visible {
    overflow: visible;
}
.overflow-scroll {
    overflow: scroll;
}

/* height */
.height-full {
    height: 100%;
}

/* background color */
.bg-default {
    background-color: var(--reactist-bg-default);
}
.bg-aside {
    background-color: var(--reactist-bg-aside);
}
.bg-highlight {
    background-color: var(--reactist-bg-highlight);
}
.bg-selected {
    background-color: var(--reactist-bg-selected);
}

/* toasts background-color requires more customization as it features an inverted (dark) background, even in light mode */
.bg-toast {
    background-color: var(--reactist-bg-toast);
    color: var(--reactist-content-primary);
    --reactist-content-primary: var(--reactist-toast-content-primary);
    --reactist-content-secondary: var(--reactist-toast-content-secondary);
    --reactist-text-link-idle-tint: var(--reactist-content-primary);
    --reactist-text-link-idle-decoration: var(--reactist-text-link-hover-decoration);
    --reactist-actionable-tertiary-idle-tint: var(--reactist-toast-actionable-primary-tint);
    --reactist-actionable-tertiary-hover-tint: var(--reactist-toast-actionable-primary-tint);
    --reactist-actionable-tertiary-hover-fill: var(--reactist-toast-actionable-hover-fill);
    --reactist-actionable-quaternary-idle-tint: var(--reactist-toast-actionable-secondary-tint);
    --reactist-actionable-quaternary-hover-tint: var(--reactist-toast-actionable-secondary-tint);
    --reactist-actionable-quaternary-hover-fill: var(--reactist-toast-actionable-hover-fill);
}

/* border radius */
.borderRadius-standard {
    border-radius: var(--reactist-border-radius-small);
}
.borderRadius-full {
    border-radius: var(--reactist-border-radius-large);
}

/* border */
.border-primary {
    border: 1px solid var(--reactist-divider-primary);
}
.border-secondary {
    border: 1px solid var(--reactist-divider-secondary);
}
.border-tertiary {
    border: 1px solid var(--reactist-divider-tertiary);
}

/* text-align */
.textAlign-start {
    text-align: start;
}
.textAlign-center {
    text-align: center;
}
.textAlign-end {
    text-align: end;
}
.textAlign-justify {
    text-align: justify;
}
@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
    .tablet-textAlign-start {
        text-align: start;
    }
    .tablet-textAlign-center {
        text-align: center;
    }
    .tablet-textAlign-end {
        text-align: end;
    }
    .tablet-textAlign-justify {
        text-align: justify;
    }
}
@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
    .desktop-textAlign-start {
        text-align: start;
    }
    .desktop-textAlign-center {
        text-align: center;
    }
    .desktop-textAlign-end {
        text-align: end;
    }
    .desktop-textAlign-justify {
        text-align: justify;
    }
}

/**
 * Overlay scroll
 *
 * Note: Scrollbar appearance may be affected by macOS system settings,
 * such as "Show scroll bars: Automatically/When scrolling/Always".
 * This can override or change the effect of these styles on Mac devices.
 */
.overlayScroll {
    overflow: auto;
}

/* Webkit-based browsers (Chrome, Safari, Edge) */
.overlayScroll::-webkit-scrollbar {
    width: var(--reactist-spacing-small);
}

.overlayScroll::-webkit-scrollbar-track {
    background: transparent;
}

.overlayScroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: var(--reactist-border-radius-large);
}

.overlayScroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--reactist-scrollbar-thumb-idle);
}

/* Firefox */
.overlayScroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.overlayScroll:hover {
    scrollbar-color: var(--reactist-scrollbar-thumb-idle) transparent;
}
