@import 'css/variables.css';

@import 'css/normalize.css';
@import 'css/skeleton.css';

@import 'css/text.css';
@import 'css/button.css';
@import 'css/activity-indicator.css';
@import 'css/progressbar.css';
@import 'css/modal.css';
@import 'css/spacing.css';
@import 'css/slide.css';
@import 'css/navigationcontroller.css';
@import 'css/tooltip.css';
@import 'css/segmented-control.css';
@import 'css/checkbox.css';
@import 'css/radiobutton.css';
@import 'css/validation.css';
@import 'css/dnd.css';
@import 'css/card.css';
@import 'css/colored-content.css';
@import 'css/page-control.css';
@import 'css/carousel.css';
@import 'css/toast.css';
@import 'css/grid.css';

/*
@font-face {
    font-family: "Icons";
    src: url("symbols.ttf") format("truetype");
}
*/

* {
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    color: var(--foreground-color);
    -webkit-touch-callout: none;
}

.background-transparent {
    background-color: var(--background-transparent);
}

.background-colored-light {
    background-color: var(--background-colored-light);
}

.rounded-corners {
      /* border: 1px solid var(--tooltip-border); */
      border-radius: var(--small-space);
}

.rounded-corners-medium {
      /* border: 1px solid var(--tooltip-border); */
      border-radius: var(--medium-space);
}


.border-1px {
    border: 1px solid var(--border-color);
}

.border-black {
    border-color: var(--foreground-color);
}

.circle {
    border-radius: 50%;
}

.info {
    background-color: var(--background-info-light);
}

.success {
    background-color: var(--background-success-light);
}

.warning {
    background-color: var(--background-warning-light);
}

.error {
    background-color: var(--background-error-light);
}

.successStrong {
    background-color: var(--background-success-strong);
    color: var(--foreground-color-reverse);
}

.warningStrong {
    background-color: var(--background-warning-strong);
    color: var(--foreground-color-reverse);
}

.errorStrong {
    background-color: var(--background-error-strong);
    color: var(--foreground-color-reverse);
}

.disableTextSelection {
    user-select: none;
    -webkit-user-select: none;
}

.enableTextSelection {
    user-select: text;
    -webkit-user-select: text;
}

.foregroundColorRed {
    color: var(--strong-red-color);
}

.foregroundColorGreen {
    color: var(--strong-green-color);
}

.foregroundColorYellow {
    color: var(--strong-yellow-color);
}

/*
.icon {
    font-family: Icons;
}

.icon.disclose::after {
    content: "G";
}

.icon.disclose.gray {
    opacity: 0.5;
}
*/

.shadow-small {
    box-shadow: var(--small-space) var(--small-space) var(--small-space) 0 var(--shadow-color);
}
  
.shadow-medium {
  box-shadow: var(--medium-space) var(--medium-space) var(--medium-space) 0 var(--shadow-color);
}

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.disclosable {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--animation-duration-default), opacity var(--animation-duration-default);
}

.disclosable.closed {
    grid-template-rows: 0fr;
    opacity: 0;
}

.disclosable > * {
    overflow: hidden;
}

.extended-to-full-page-width {
    margin-left: calc(0px - var(--large-space));
    margin-right: calc(0px - var(--large-space));
    padding-left: var(--large-space);
    padding-right: var(--large-space);
}


@media (prefers-color-scheme: dark) {
    :root {
        scrollbar-color: var(--background-color-3) var(--background-color);
    }
}