@import "./reboot.css";
@import "./button.css";
@import "./icons.css";
@import "./icon.css";
@import "./divider.css";
@import "./input.css";
@import "./file.css";
@import "./notice.css";
@import "./checkbox.css";
@import "./radio.css";
@import "./progress.css";
@import "./badge.css";
@import "./pagination.css";
@import "./select.css";
@import "./fieldset.css";
@import "./text.css";
@import "./tab.css";
@import "./box.css";
@import "./content.css";
@import "./image.css";
@import "./switch.css";
@import "./meta.css";
@import "./selection.css";
@import "./table.css";
@import "./procedure.css";
@import "./grid.css";
@import "./rating.css";
@import "./chip.css";
@import "./close.css";
@import "./loading.css";
@import "./breadcrumb.css";
@import "./list.css";
@import "./flag.css";
@import "./statistic.css";
@import "./app-sidebar.css";
@import "./app-navbar.css";
@import "./snackbar.css";
@import "./accordion.css";
@import "./mask.css";
@import "./header.css";
@import "./quote.css";
@import "./app-layout.css";
@import "./wrap.css";
@import "./container.css";
@import "./control.css";
@import "./menu.css";
@import "./checklist.css";
@import "./imageset.css";
@import "./iconset.css";
@import "./conversation.css";
@import "./modal.css";
@import "./gauge.css";
@import "./tooltip.css";
@import "./dropdown.css";
@import "./app-topbar.css";
@import "./app-drawer.css";
@import "./timeline.css";
@import "./blankslate.css";
@import "./app-center.css";
@import "./utilities.css";
@import "./popover.css";
@import "./range.css";
@import "./colors.css";

/* ==========================================================================
   Variables
   ========================================================================== */

html {
    --ts-breakpoint-mobile-min: 0px;
    --ts-breakpoint-mobile-max: 767.98px;
    --ts-breakpoint-tablet-min: 768px;
    --ts-breakpoint-tablet-max: 1023.98px;
    --ts-breakpoint-desktop-min: 1024px;
    --ts-breakpoint-desktop-max: 1279.98px;
    --ts-breakpoint-widescreen-min: 1280px;
    --ts-breakpoint-widescreen-max: 9999px;

    --ts-z-drawer: 102;
    --ts-z-dropdown: 103;
    --ts-z-mask: 101;
    --ts-z-modal: 102;
    --ts-z-tooltip: 104;

    --ts-border-radius-container: 0.4rem;
    --ts-border-radius-element: 0.4rem;
    --ts-border-radius-secondary: 0.3rem;
}

/**
 * Sizes
 */

html {
    --ts-input-height-large: 42px;
    --ts-input-height-medium: 37px;
    --ts-input-height-small: 32px;

    --ts-font-size-mini: calc(12 / 15 * 1rem);
    --ts-font-size-tiny: calc(13 / 15 * 1rem);
    --ts-font-size-small: calc(14 / 15 * 1rem);
    --ts-font-size-medium: calc(15 / 15 * 1rem);
    --ts-font-size-large: calc(18 / 15 * 1rem);
    --ts-font-size-big: calc(20 / 15 * 1rem);
    --ts-font-size-huge: calc(24 / 15 * 1rem);
    --ts-font-size-massive: calc(30 / 15 * 1rem);

    --ts-font-size-12px: calc(12 / 15 * 1rem);
    --ts-font-size-13px: calc(13 / 15 * 1rem);
    --ts-font-size-14px: calc(14 / 15 * 1rem);
    --ts-font-size-15px: calc(15 / 15 * 1rem);
    --ts-font-size-16px: calc(16 / 15 * 1rem);
    --ts-font-size-17px: calc(17 / 15 * 1rem);
    --ts-font-size-18px: calc(18 / 15 * 1rem);
    --ts-font-size-20px: calc(20 / 15 * 1rem);
    --ts-font-size-24px: calc(24 / 15 * 1rem);
    --ts-font-size-25px: calc(25 / 15 * 1rem);
    --ts-font-size-30px: calc(30 / 15 * 1rem);
    --ts-font-size-33px: calc(33 / 15 * 1rem);
    --ts-font-size-38px: calc(38 / 15 * 1rem);
    --ts-font-size-45px: calc(45 / 15 * 1rem);
    --ts-font-size-55px: calc(55 / 15 * 1rem);
    --ts-font-size-65px: calc(65 / 15 * 1rem);
    --ts-font-size-75px: calc(75 / 15 * 1rem);

    --ts-absolute-mini: calc(12 / 15 * 1rem);
    --ts-absolute-tiny: calc(13 / 15 * 1rem);
    --ts-absolute-small: calc(14 / 15 * 1rem);
    --ts-absolute-medium: calc(15 / 15 * 1rem);
    --ts-absolute-large: calc(18 / 15 * 1rem);
    --ts-absolute-big: calc(20 / 15 * 1rem);
    --ts-absolute-huge: calc(24 / 15 * 1rem);
    --ts-absolute-massive: calc(30 / 15 * 1rem);

    --ts-relative-mini: calc(12 / 15 * 1em);
    --ts-relative-tiny: calc(13 / 15 * 1em);
    --ts-relative-small: calc(14 / 15 * 1em);
    --ts-relative-medium: calc(15 / 15 * 1em);
    --ts-relative-large: calc(18 / 15 * 1em);
    --ts-relative-big: calc(20 / 15 * 1em);
    --ts-relative-huge: calc(24 / 15 * 1em);
    --ts-relative-massive: calc(30 / 15 * 1em);

    --ts-space-gap: 1rem;
    --ts-space-gap-tiny: 0.3rem;
    --ts-space-gap-small: 0.5rem;
    --ts-space-gap-large: 1.5rem;
    --ts-space-gap-big: 3rem;
    --ts-space-gap-huge: 4.5rem;
}

/* ==========================================================================
   Scales
   ========================================================================== */

body.is-small {
    font-size: 14px;
}
body.is-medium {
    font-size: 15px;
}
body.is-large {
    font-size: 16px;
}

/* ==========================================================================
   Radius
   ========================================================================== */

body.is-rounded {
    --ts-border-radius-container: 1rem;
    --ts-border-radius-element: 0.7rem;
    --ts-border-radius-secondary: 0.4rem;
}

body.is-sharp {
    --ts-border-radius-container: 0rem;
    --ts-border-radius-element: 0rem;
    --ts-border-radius-secondary: 0rem;
}
