`s, which have `min-width: 0;` by default.\n// So we reset that to ensure fieldsets behave more like a standard block element.\n// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.\n\nfieldset {\n min-width: 0; // 1\n padding: 0; // 2\n margin: 0; // 2\n border: 0; // 2\n}\n\n// 1. By using `float: left`, the legend will behave like a block element.\n// This way the border of a fieldset wraps around the legend if present.\n\nlegend {\n float: left; // 1\n width: 100%;\n padding: 0;\n margin-bottom: 0.5em;\n font-weight: var(--#{$CSS_VAR_PFX}bold-font-weight);\n line-height: inherit;\n\n + * {\n clear: left;\n }\n}\n\n// Fix height of inputs with a type of datetime-local, date, month, week, or time\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n padding: 0;\n}\n\n::-webkit-inner-spin-button {\n height: auto;\n}\n// 1. Correct the outline style in Safari.\n// 2. This overrides the extra rounded corners on search inputs in iOS so that our\n// `.form-control` class can properly style them. Note that this cannot simply\n// be added to `.form-control` as it's not specific enough. For details, see\n\n[type=\"search\"] {\n outline-offset: -2px; // 1\n -webkit-appearance: textfield; // 2\n}\n// 1. A few input types should stay LTR\n// See https://rtlstyling.com/posts/rtl-styling#form-inputs\n// 2. RTL only output\n// See https://rtlcss.com/learn/usage-guide/control-directives/#raw\n\n[type=\"tel\"],\n[type=\"url\"],\n[type=\"email\"],\n[type=\"number\"] {\n direction: ltr;\n}\n\n// Remove the inner padding in Chrome and Safari on macOS.\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n// Remove padding around color pickers in webkit browsers\n\n::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n\n// Inherit font family and line height for file input buttons\n\n::file-selector-button {\n font: inherit;\n}\n\n// 1. Change font properties to `inherit`\n// 2. Correct the inability to style clickable types in iOS and Safari.\n\n::-webkit-file-upload-button {\n font: inherit; // 1\n -webkit-appearance: button; // 2\n}\n\n// Correct element displays\n\noutput {\n display: inline-block;\n}\n\n// Remove border from iframe\n\niframe {\n border: 0;\n}\n\n// Summary\n//\n// 1. Add the correct display in all browsers\n\nsummary {\n display: list-item; // 1\n cursor: pointer;\n}\n\n// Progress\n//\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\nprogress {\n vertical-align: baseline;\n}\n\n// Hidden attribute\n//\n// Always hide an element with the `hidden` HTML attribute.\n\n[hidden] {\n display: none !important;\n}\n","// Responsive breakpoints media query helper functions\n// How to use:\n// @include break-xs() {\n// body {\n// background: red;\n// }\n// }\n@mixin break-xs() {\n $xs-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xs\");\n @media screen and (max-width: $xs-bp) {\n @content;\n }\n}\n\n@mixin break-sm() {\n $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, \"sm\");\n $md-bp: map-get($RESPONSIVE_BREAKPOINTS, \"md\");\n @media screen and (min-width: $sm-bp) and (max-width: ($md-bp - 1px)) {\n @content;\n }\n}\n\n@mixin break-sm-min() {\n $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, \"sm\");\n @media screen and (min-width: $sm-bp) {\n @content;\n }\n}\n\n@mixin break-sm-max() {\n $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, \"sm\");\n @media screen and (max-width: ($sm-bp - 0.02px)) {\n @content;\n }\n}\n\n@mixin break-md() {\n $md-bp: map-get($RESPONSIVE_BREAKPOINTS, \"md\");\n $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, \"lg\");\n @media screen and (min-width: $md-bp) and (max-width: ($lg-bp - 1px)) {\n @content;\n }\n}\n\n@mixin break-md-min() {\n $md-bp: map-get($RESPONSIVE_BREAKPOINTS, \"md\");\n @media screen and (min-width: $md-bp) {\n @content;\n }\n}\n\n@mixin break-md-max() {\n $md-bp: map-get($RESPONSIVE_BREAKPOINTS, \"md\");\n @media screen and (max-width: ($md-bp - 0.02px)) {\n @content;\n }\n}\n\n@mixin break-lg() {\n $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, \"lg\");\n $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xl\");\n @media screen and (min-width: $lg-bp) and (max-width: ($xl-bp - 1px)) {\n @content;\n }\n}\n\n@mixin break-lg-min() {\n $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, \"lg\");\n @media screen and (min-width: $lg-bp) {\n @content;\n }\n}\n\n@mixin break-lg-max() {\n $lg-bp: map-get($RESPONSIVE_BREAKPOINTS, \"lg\");\n @media screen and (max-width: ($lg-bp - 0.02px)) {\n @content;\n }\n}\n\n@mixin break-xl() {\n $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xl\");\n $xxl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xxl\");\n @media screen and (min-width: $xl-bp) and (max-width: ($xxl-bp - 1px)) {\n @content;\n }\n}\n\n@mixin break-xl-min() {\n $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xl\");\n @media screen and (min-width: $xl-bp) {\n @content;\n }\n}\n\n@mixin break-xl-max() {\n $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xl\");\n @media screen and (max-width: ($xl-bp - 0.02px)) {\n @content;\n }\n}\n\n@mixin break-xxl() {\n $xxl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xxl\");\n @media screen and (min-width: $xxl-bp) {\n @content;\n }\n}\n\n@mixin break-xxl-max() {\n $xxl-bp: map-get($RESPONSIVE_BREAKPOINTS, \"xxl\");\n @media screen and (max-width: ($xxl-bp - 0.02px)) {\n @content;\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}blockquote-accent-color: var(--#{$CSS_VAR_PFX}color-accent-primary);\n}\n\nblockquote {\n position: relative;\n z-index: 0;\n overflow: hidden;\n line-height: var(--#{$CSS_VAR_PFX}large-line-height);\n margin: 0 0 var(--#{$CSS_VAR_PFX}paragraph-mb);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n border-style: solid;\n border-color: var(--#{$CSS_VAR_PFX}blockquote-accent-color);\n\n @if $IS_LTR {\n border-width: 0 0 0 0.5em;\n } @else {\n border-width: 0 0.5em 0 0;\n }\n\n &:not(.no-icon):before {\n content: \" \";\n position: absolute;\n z-index: -1;\n opacity: 0.1;\n background-color: currentColor;\n mask: var(--#{$CSS_VAR_PFX}blockquote-icon) no-repeat 50% 50%;\n -webkit-mask: var(--#{$CSS_VAR_PFX}blockquote-icon) no-repeat 50% 50%;\n filter: brightness(100%);\n }\n\n &:not(.large) {\n font-size: 1em;\n line-height: var(--#{$CSS_VAR_PFX}large-line-height);\n padding: 0.75em 1.25em;\n\n @if $IS_LTR {\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5)\n var(--#{$CSS_VAR_PFX}border-radius)\n var(--#{$CSS_VAR_PFX}border-radius)\n calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n } @else {\n border-radius: var(--#{$CSS_VAR_PFX}border-radius)\n calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5)\n calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5)\n var(--#{$CSS_VAR_PFX}border-radius);\n }\n\n &:before {\n // blockquote icon\n top: 1em;\n width: 7em;\n height: 7em;\n\n @if $IS_LTR {\n left: 1em;\n } @else {\n right: 1em;\n }\n }\n }\n\n &.large {\n font-size: 1.25em;\n border-width: 0.5em 0;\n padding: 1.25em 0.75em;\n margin-top: 2em;\n\n &:before {\n // blockquote icon\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 15em;\n height: 15em;\n margin: auto;\n }\n }\n\n &.large:not(.text-align-fill) {\n text-align: center;\n }\n\n cite {\n display: block;\n font-size: 0.64em;\n font-style: normal;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n padding-top: 1.5em;\n opacity: 0.8;\n }\n}\n","figure {\n position: relative;\n width: max-content;\n max-width: 100%;\n height: max-content;\n margin: 0 0 1em;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n img {\n width: 100%;\n height: 100%;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n }\n\n figcaption {\n font-size: 0.9em;\n padding: 1em 0;\n }\n\n .source {\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}txt-color-light);\n position: absolute;\n top: 1em;\n font-size: 0.75em;\n line-height: 1;\n padding: 0.5em;\n color: var(--#{$CSS_VAR_PFX}txt-color-inverted);\n background: var(--#{$CSS_VAR_PFX}txt-color-dark);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.75);\n\n @if $IS_LTR {\n right: 1em;\n } @else {\n left: 1em;\n }\n }\n\n &.fill {\n width: 100% !important;\n }\n\n &.centered {\n margin-left: auto;\n margin-right: auto;\n }\n\n &.overlay-caption {\n overflow: hidden;\n\n figcaption {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding-left: 1em;\n padding-right: 1em;\n color: var(--#{$CSS_VAR_PFX}txt-color-inverted);\n background: linear-gradient(0, var(--#{$CSS_VAR_PFX}txt-color-dark), transparent);\n }\n }\n}\n","// hr: default, dots, short\nhr {\n margin: 1em 0;\n opacity: 0.5;\n color: currentColor;\n background-color: currentColor;\n border: none;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &:not([size]) {\n height: var(--#{$CSS_VAR_PFX}border-width);\n }\n\n &.dots {\n line-height: 1;\n display: block;\n height: auto;\n padding: 2em;\n text-align: center;\n background: transparent;\n\n &:before {\n content: \"•••\";\n letter-spacing: 1.4em;\n font-size: 1.4em;\n font-weight: bold;\n }\n }\n\n &.short {\n width: 9em;\n margin: 3em auto;\n }\n}\n","kbd {\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n vertical-align: middle;\n text-align: center;\n font-size: 0.85em;\n font-weight: normal;\n line-height: 1;\n display: inline-block;\n min-width: 1.75em;\n padding: 0.18em 0.32em 0.32em;\n margin: 0 0.25em;\n background: var(--#{$CSS_VAR_PFX}bg-color-dark);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);\n will-change: transform;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition) 0.15s;\n\n &:hover {\n box-shadow: inset 0 0 0 var(--#{$CSS_VAR_PFX}local-border-color);\n transform: translateY(0.15em);\n }\n\n kbd {\n padding: 0;\n background: transparent;\n border: none;\n box-shadow: none;\n transform: none !important;\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}table-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}table-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}table-bg-color-dark: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}table-bg-color-darker: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}table-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n}\n\ntable {\n $table_radius: var(--#{$CSS_VAR_PFX}border-radius);\n $table_border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}table-border-color);\n\n display: table;\n table-layout: fixed;\n caption-side: bottom;\n color: var(--#{$CSS_VAR_PFX}table-txt-color);\n width: 100%;\n\n td,\n th {\n padding: 0.75em 1em;\n background: var(--#{$CSS_VAR_PFX}table-bg-color);\n }\n\n thead {\n word-break: break-word;\n \n td,\n th {\n background: var(--#{$CSS_VAR_PFX}table-bg-color-dark);\n }\n }\n\n &:not(.bordered) {\n border-collapse: collapse;\n }\n\n &.bordered:not(.horizontal) {\n border-spacing: 0;\n\n tr:first-child {\n th,\n td {\n border-top: $table_border;\n }\n }\n\n td,\n th {\n @if $IS_LTR {\n border-left: $table_border;\n\n &:last-child {\n border-right: $table_border;\n }\n } @else {\n border-right: $table_border;\n\n &:last-child {\n border-left: $table_border;\n }\n }\n }\n\n td,\n th {\n border-bottom: $table_border;\n }\n\n thead + tbody tr {\n td,\n th {\n border-top: none !important;\n }\n }\n }\n\n &.horizontal {\n tr {\n flex-basis: 100%;\n white-space: nowrap;\n }\n thead {\n @if $IS_LTR {\n float: left;\n } @else {\n float: right;\n }\n\n td,\n th {\n display: block;\n }\n }\n tbody {\n display: flex;\n overflow-x: auto;\n\n tr {\n display: inline-block;\n }\n td,\n th {\n display: block;\n }\n }\n\n &.bordered {\n border-spacing: 0;\n thead {\n tr {\n display: block;\n @if $IS_LTR {\n border-right: $table_border;\n } @else {\n border-left: $table_border;\n }\n }\n td,\n th {\n @if $IS_LTR {\n border-left: $table_border;\n } @else {\n border-right: $table_border;\n }\n }\n }\n tbody {\n th,\n td {\n @if $IS_LTR {\n border-right: $table_border;\n } @else {\n border-left: $table_border;\n }\n }\n }\n td,\n th {\n border-top: $table_border;\n &:last-child {\n border-bottom: $table_border;\n }\n }\n }\n\n // horizontal border radius\n @if $IS_LTR {\n thead tr {\n th,\n td {\n &:first-child {\n border-top-left-radius: $table_radius;\n }\n &:last-child {\n border-bottom-left-radius: $table_radius;\n }\n }\n }\n tbody tr:last-child {\n th,\n td {\n &:first-child {\n border-top-right-radius: $table_radius;\n }\n &:last-child {\n border-bottom-right-radius: $table_radius;\n }\n }\n }\n } @else {\n thead tr {\n th,\n td {\n &:first-child {\n border-top-right-radius: $table_radius;\n }\n &:last-child {\n border-bottom-right-radius: $table_radius;\n }\n }\n }\n tbody tr:last-child {\n th,\n td {\n &:first-child {\n border-top-left-radius: $table_radius;\n }\n &:last-child {\n border-bottom-left-radius: $table_radius;\n }\n }\n }\n }\n }\n\n // vertical border radius\n &:not(.horizontal) {\n @if $IS_LTR {\n tr:last-child {\n th {\n &:first-child {\n border-top-left-radius: $table_radius;\n }\n &:last-child {\n border-top-right-radius: $table_radius;\n }\n }\n td {\n &:first-child {\n border-bottom-left-radius: $table_radius;\n }\n &:last-child {\n border-bottom-right-radius: $table_radius;\n }\n }\n }\n } @else {\n tr:last-child {\n th {\n &:first-child {\n border-top-right-radius: $table_radius;\n }\n &:last-child {\n border-top-left-radius: $table_radius;\n }\n }\n td {\n &:first-child {\n border-bottom-right-radius: $table_radius;\n }\n &:last-child {\n border-bottom-left-radius: $table_radius;\n }\n }\n }\n }\n }\n\n &.striped {\n thead {\n th,\n td {\n background: var(--#{$CSS_VAR_PFX}table-bg-color-darker);\n }\n }\n tbody tr:nth-child(odd) {\n td,\n th {\n background: var(--#{$CSS_VAR_PFX}table-bg-color-dark);\n }\n }\n }\n}\n\ncaption {\n font-size: 0.9em;\n padding: 0.75em 0;\n opacity: 0.8;\n}\n\nth {\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n text-align: inherit;\n text-align: -webkit-match-parent;\n}\n\n.table-active {\n background: var(--#{$CSS_VAR_PFX}table-bg-color-darker);\n}\n",":root {\n --#{$CSS_VAR_PFX}accordion-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}accordion-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}accordion-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n\n --#{$CSS_VAR_PFX}accordion-animation-show-duration: #{$ACCORDION_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}accordion-animation-hide-duration: #{$ACCORDION_HIDE_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}accordion-animation-show: flatify-blow-in var(--#{$CSS_VAR_PFX}accordion-animation-show-duration)\n 0.1s ease-in-out;\n --#{$CSS_VAR_PFX}accordion-animation-hide: flatify-blow-out var(--#{$CSS_VAR_PFX}accordion-animation-hide-duration)\n ease-in-out;\n}\n\n.accordion {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}accordion-txt-color);\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}accordion-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}accordion-border-color);\n display: flex;\n flex-direction: column;\n width: 100%;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n\n &.bordered {\n border-radius: 1em;\n\n .accordion-item {\n overflow: hidden;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n\n &[class*=\"style-\"] {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}accordion-txt-color);\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}accordion-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}accordion-border-color);\n }\n\n &:last-child {\n box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);\n }\n\n &:not(.active) .accordion-header,\n &:not(:last-child) {\n border-bottom: none;\n }\n\n &:first-child:not(:last-child) {\n border-radius: var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0 0;\n }\n\n &:last-child:not(:first-child) {\n border-radius: 0 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius);\n }\n\n // if there is just one accordion item round it\n &:first-child:last-child {\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n }\n }\n }\n}\n\n.accordion-item:not(.active) {\n .accordion-collapse {\n display: none;\n }\n}\n\n.accordion-header {\n font-size: 1em;\n margin: 0;\n\n &.active {\n border-bottom: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n }\n\n .accordion-toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: initial;\n width: 100%;\n height: 100%;\n padding: 1em;\n color: currentColor;\n background: transparent;\n border: none;\n }\n\n .add-button {\n font-size: 0.75em;\n opacity: 0.75;\n }\n}\n\n.accordion-collapse {\n overflow: hidden;\n padding: 0;\n margin: 0;\n will-change: height;\n transition: height 0.2s ease-in-out;\n\n &.show .accordion-body {\n animation: var(--#{$CSS_VAR_PFX}accordion-animation-show) both;\n }\n\n &.accordion-will-be-hidden .accordion-body {\n animation: var(--#{$CSS_VAR_PFX}accordion-animation-hide) forwards;\n }\n}\n\n.accordion-body {\n padding: 1em;\n}\n\n.fade-animation {\n .show {\n .accordion-body {\n animation: flatify-fade-in var(--#{$CSS_VAR_PFX}accordion-animation-show-duration) 0.1s ease-in-out both;\n }\n }\n\n .accordion-will-be-hidden {\n .accordion-body {\n animation: flatify-fade-out var(--#{$CSS_VAR_PFX}accordion-animation-hide-duration) ease-in-out both;\n }\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}alert-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}alert-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}alert-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}alert-animation-show-duration: #{$ALERT_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}alert-animation-hide-duration: #{$ALERT_HIDE_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}alert-animation-show: flatify-blow-in var(--#{$CSS_VAR_PFX}alert-animation-show-duration) ease;\n --#{$CSS_VAR_PFX}alert-animation-hide: flatify-alert-will-be-removed\n var(--#{$CSS_VAR_PFX}alert-animation-hide-duration) ease;\n}\n\n.alert {\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}alert-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}alert-border-color);\n position: relative;\n font-size: 0.9em;\n line-height: var(--#{$CSS_VAR_PFX}large-line-height);\n padding: 1.25em;\n margin-bottom: 1em;\n color: var(--#{$CSS_VAR_PFX}alert-txt-color);\n background: var(--#{$CSS_VAR_PFX}alert-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &:not(.alert-will-be-removed) {\n animation: var(--#{$CSS_VAR_PFX}alert-animation-show) both;\n }\n\n &.alert-will-be-removed {\n animation: var(--#{$CSS_VAR_PFX}alert-animation-hide) both;\n }\n\n &:hover {\n .close-button.floating {\n transform: scale(1);\n }\n }\n\n .close-button {\n position: relative;\n top: -0.38em;\n\n @if $IS_LTR {\n float: right;\n right: -0.38em;\n } @else {\n float: left;\n left: -0.38em;\n }\n\n &.floating {\n position: absolute;\n top: 0.75em;\n\n @if $IS_LTR {\n right: 0.75em;\n } @else {\n left: 0.75em;\n }\n\n background: transparent !important;\n transform: scale(0);\n\n &:after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 100em;\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n box-shadow: 0 0 0.64em 0.5em var(--flatify__local-bg-color);\n }\n }\n\n &:focus {\n transform: scale(1);\n }\n }\n\n &:not(.has-icon) {\n width: 100%;\n }\n\n &.has-icon {\n @if $IS_LTR {\n padding-left: 2.75em;\n margin-left: 1.5em;\n } @else {\n padding-right: 2.75em;\n margin-right: 1.5em;\n }\n }\n\n .alert-svg {\n position: absolute;\n height: 3.3em;\n margin: auto 0;\n top: 0;\n bottom: 0;\n filter: brightness(115%);\n\n @if $IS_LTR {\n left: -1.4em;\n } @else {\n right: -1.4em;\n }\n\n padding: 0.5em;\n color: inherit;\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.9);\n\n svg {\n width: 2em;\n height: 2em;\n\n &:not([fill=\"none\"]) {\n fill: currentColor;\n }\n }\n }\n\n // It should be darker\n &.style-light-light .alert-svg {\n filter: brightness(95%);\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}badge-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted);\n --#{$CSS_VAR_PFX}badge-bg-color: var(--#{$CSS_VAR_PFX}color-accent-primary);\n}\n\n.badge {\n user-select: none;\n display: inline-block;\n min-width: 1.35em;\n min-height: 1.35em;\n padding: 0.35em 0.65em;\n text-decoration: none !important;\n font-size: 0.64em;\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n line-height: 1;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n color: var(--#{$CSS_VAR_PFX}badge-txt-color);\n background: var(--#{$CSS_VAR_PFX}badge-bg-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n}\n",":root {\n --#{$CSS_VAR_PFX}backdrop-priority: #{$ZINDEX_BACKDROP};\n --#{$CSS_VAR_PFX}backdrop-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}backdrop-opacity: 0.5;\n --#{$CSS_VAR_PFX}backdrop-filter: none;\n\n --#{$CSS_VAR_PFX}modal-backdrop-color: var(--#{$CSS_VAR_PFX}backdrop-color);\n}\n\n.backdrop-layer {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--#{$CSS_VAR_PFX}backdrop-priority); // default z-index\n display: none;\n width: 100%;\n height: 100%;\n background: var(--#{$CSS_VAR_PFX}backdrop-color);\n opacity: var(--#{$CSS_VAR_PFX}backdrop-opacity);\n backdrop-filter: var(--#{$CSS_VAR_PFX}backdrop-filter);\n\n &.show {\n display: block;\n animation: flatify-backdrop-fade-in var(--#{$CSS_VAR_PFX}modal-animation-show-duration);\n }\n\n &.backdrop-will-be-removed {\n animation: flatify-fade-out var(--#{$CSS_VAR_PFX}modal-animation-hide-duration) both;\n }\n\n &.modal-backdrop {\n --#{$CSS_VAR_PFX}backdrop-priority: #{$ZINDEX_MODAL_BACKDROP};\n --#{$CSS_VAR_PFX}backdrop-color: var(--#{$CSS_VAR_PFX}modal-backdrop-color);\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}breadcrumbs-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}breadcrumbs-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}breadcrumbs-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n}\n\n.breadcrumbs-wrapper {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}breadcrumbs-txt-color);\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}breadcrumbs-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}breadcrumbs-border-color);\n width: 100%;\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n}\n\n.breadcrumbs {\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n list-style: none;\n padding: 0;\n margin: 0;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &[class*=\"style-\"] {\n background: transparent !important;\n }\n\n .crumb {\n overflow: hidden;\n position: relative;\n white-space: nowrap;\n display: table-cell;\n padding: 0.64em 1em;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border-color: var(--#{$CSS_VAR_PFX}local-border-color);\n\n &:not(:first-child) {\n @if $IS_LTR {\n padding-left: 3em;\n } @else {\n padding-right: 3em;\n }\n\n &:before {\n content: \" \";\n position: absolute;\n top: 0;\n bottom: 0;\n @if $IS_LTR {\n left: -1.2em;\n } @else {\n right: -1.2em;\n }\n display: block;\n width: 2.5em;\n height: 2.5em;\n margin: auto 0;\n background: transparent;\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: 0.18em;\n transform: rotate(45deg);\n transition: transform var(--#{$CSS_VAR_PFX}simple-transition);\n }\n }\n\n &:first-child {\n @if $IS_LTR {\n padding-left: 2em;\n } @else {\n padding-right: 2em;\n }\n }\n\n &:last-child {\n @if $IS_LTR {\n padding-right: 2em;\n } @else {\n padding-left: 2em;\n }\n }\n\n &:hover,\n &:focus-within {\n &:before {\n transform: rotate(45deg) scale(1.15);\n }\n }\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}button-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}button-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}button-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n}\n\n// .static for prevent hover/active/focus/focus-visible effects\n// .bordered for buttons with border\n// .outline for buttons with transparent background and just border\n// .active for setting pressed button style\n// .disabled for setting disabled button style\n%button {\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}button-bg-color);\n user-select: none;\n appearance: none;\n vertical-align: middle;\n text-align: center;\n text-decoration: none !important;\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n display: inline-block;\n padding: 0.75em 0.85em 0.5em;\n margin: 0.32em 0.32em 0.5em;\n color: var(--#{$CSS_VAR_PFX}button-txt-color);\n background: var(--#{$CSS_VAR_PFX}button-bg-color);\n border: none;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n box-shadow: 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 1.38) 0 var(--#{$CSS_VAR_PFX}button-border-color);\n // filter affects box-shadow width, so it should be set as default to prevent bugs on hover\n filter: brightness(100%);\n will-change: transform, filter;\n // !important to replace input transition\n transition: filter var(--#{$CSS_VAR_PFX}simple-transition) !important;\n\n &:not(.static) {\n // button has its special pressed effect, there is no need for outline,\n // unless the button is static which does not support hover/focus\n outline: none !important;\n }\n\n .radio-button:focus + &,\n &:not(.static):hover {\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n\n // active state\n .checkbox-button:checked + &,\n .radio-button:checked + &,\n &.active,\n &:not(.static):focus-visible,\n &:not(.static):active {\n box-shadow: inset 0 0 0 var(--#{$CSS_VAR_PFX}button-border-color);\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n transform: translateY(calc(var(--#{$CSS_VAR_PFX}border-width) * 1.38));\n }\n\n &.outline {\n color: var(--#{$CSS_VAR_PFX}button-txt-color) !important;\n background: transparent !important;\n }\n\n &.outline,\n &.bordered {\n box-shadow: 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 1.38) 0 var(--#{$CSS_VAR_PFX}button-border-color),\n inset 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) 0 var(--#{$CSS_VAR_PFX}button-border-color),\n inset calc(var(--#{$CSS_VAR_PFX}border-width) * -0.38) 0 0 var(--#{$CSS_VAR_PFX}button-border-color),\n inset calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) 0 0 var(--#{$CSS_VAR_PFX}button-border-color),\n 0 calc(var(--#{$CSS_VAR_PFX}border-width) * -0.38) 0 var(--#{$CSS_VAR_PFX}button-border-color),\n calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) 0 0 var(--#{$CSS_VAR_PFX}button-border-color),\n calc(var(--#{$CSS_VAR_PFX}border-width) * -0.38) 0 0 var(--#{$CSS_VAR_PFX}button-border-color);\n }\n\n // active state for outline & bordered\n &.outline,\n &.bordered {\n &.active,\n &:not(.static):focus-visible,\n &:not(.static):active {\n box-shadow: inset 0 0 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) var(--#{$CSS_VAR_PFX}button-border-color),\n 0 0 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) var(--#{$CSS_VAR_PFX}button-border-color);\n transform: translateY(calc(var(--#{$CSS_VAR_PFX}border-width) * 1.2));\n }\n }\n\n // if has color setter class use local values\n &[class*=\"style-\"] {\n --#{$CSS_VAR_PFX}button-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}button-border-color: var(--#{$CSS_VAR_PFX}local-border-color);\n\n // if it is light color setter, use local text color for texts\n &[class*=\"light\"] {\n --#{$CSS_VAR_PFX}button-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n }\n\n // if it is default color setter, use local border color for texts\n &:not([class*=\"light\"]) {\n --#{$CSS_VAR_PFX}button-txt-color: var(--#{$CSS_VAR_PFX}local-border-color);\n }\n\n // Exception: for outline dark-light color setter use text color\n &.outline.style-dark-light {\n --#{$CSS_VAR_PFX}button-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n }\n }\n\n &.disabled,\n &:disabled {\n pointer-events: none;\n background: var(--#{$CSS_VAR_PFX}button-border-color) !important;\n box-shadow: inset 0 0 0 var(--#{$CSS_VAR_PFX}button-border-color);\n filter: contrast(85%) brightness(85%) opacity(70%) !important;\n transform: translateY(calc(var(--#{$CSS_VAR_PFX}border-width) * 1.38));\n }\n}\n\n.button {\n @extend %button;\n\n // active state for bordered & outline checkbox & radio button\n .checkbox-button:checked + &.outline,\n .radio-button:checked + &.outline,\n .checkbox-button:checked + &.bordered,\n .radio-button:checked + &.bordered {\n box-shadow: inset 0 0 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) var(--#{$CSS_VAR_PFX}button-border-color),\n 0 0 0 calc(var(--#{$CSS_VAR_PFX}border-width) * 0.38) var(--#{$CSS_VAR_PFX}button-border-color);\n transform: translateY(calc(var(--#{$CSS_VAR_PFX}border-width) * 1.2));\n }\n\n // disabled button style\n .checkbox-button:disabled + &,\n .radio-button:disabled + & {\n pointer-events: none;\n background: var(--#{$CSS_VAR_PFX}button-border-color) !important;\n box-shadow: inset 0 0 0 var(--#{$CSS_VAR_PFX}button-border-color);\n filter: contrast(85%) brightness(85%) opacity(70%) !important;\n transform: translateY(calc(var(--#{$CSS_VAR_PFX}border-width) * 1.38));\n }\n\n svg:not([fill=\"none\"]) {\n fill: currentColor;\n }\n}\n\n.link-button {\n @extend %anchor-style;\n padding: 0.75em 0.85em;\n background: transparent;\n border: none;\n}\n\n// reset default button styles\nbutton.no-style {\n padding: 0 0.38em;\n margin: 0;\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: currentColor;\n background: transparent;\n border: none;\n outline: none;\n box-shadow: none;\n transform: none !important;\n}\n",":root {\n --#{$CSS_VAR_PFX}two-layer-button-animation-show: flatify-blow-in 0.2s 0.2s ease-in-out;\n}\n\n.two-layer-button {\n @extend .overlay-layer;\n --#{$CSS_VAR_PFX}overlay-layer-priority: 0;\n --#{$CSS_VAR_PFX}overlay-layer-opacity: 0;\n overflow: hidden;\n\n .secondary-text {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n padding-top: 0.32em;\n opacity: 0;\n\n svg {\n width: 1.75em;\n }\n }\n\n &:before,\n .secondary-text {\n transition: all var(--#{$CSS_VAR_PFX}simple-transition) 0.1s;\n }\n\n &:hover,\n &:focus-visible {\n &:before {\n --#{$CSS_VAR_PFX}overlay-layer-opacity: 1;\n }\n\n .secondary-text {\n opacity: 1;\n animation: var(--#{$CSS_VAR_PFX}two-layer-button-animation-show);\n animation-fill-mode: both;\n }\n }\n}\n",".add-button {\n position: relative;\n display: inline-block;\n width: 1.2em;\n height: 1.2em;\n background: transparent;\n border: none;\n\n &:before,\n &:after {\n content: \" \";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: max(3px, 0.18em);\n margin: auto;\n background: currentColor;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n will-change: transform;\n transition: transform var(--#{$CSS_VAR_PFX}simple-transition);\n }\n\n &:not(.active) {\n &:before {\n transform: rotate(90deg);\n }\n }\n\n &.active {\n &:before {\n transform: rotate(0);\n }\n &:after {\n transform: rotate(-180deg);\n }\n }\n}\n",".hamburger {\n position: relative;\n width: 1.2em;\n height: 1.2em;\n background: transparent;\n border: none;\n\n &:before,\n &:after {\n content: \" \";\n position: absolute;\n left: 0;\n height: max(3px, 0.18em);\n background: currentColor;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n will-change: width, transform;\n transition: transform var(--#{$CSS_VAR_PFX}simple-transition), width var(--#{$CSS_VAR_PFX}simple-transition);\n }\n\n &:not(.active) {\n &:before {\n top: 0.25em;\n width: 100%;\n }\n\n &:after {\n bottom: 0.25em;\n width: 75%;\n }\n\n &:hover,\n &:focus {\n &:before {\n width: 75%;\n }\n\n &:after {\n width: 100%;\n }\n }\n }\n\n &.active {\n &:before,\n &:after {\n top: 0;\n bottom: 0;\n width: 100%;\n margin: auto 0;\n animation: flatify-fade-in 0.25s ease-in-out;\n }\n &:before {\n transform: rotate(45deg);\n }\n &:after {\n transform: rotate(-45deg);\n }\n }\n}\n",".arrow-button {\n display: flex;\n align-items: center;\n background: var(--#{$CSS_VAR_PFX}bg-color-dark);\n border: none;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &:after {\n content: \" \";\n position: relative;\n z-index: 1;\n display: inline-block;\n width: 1.2em;\n height: 1.2em;\n background-color: currentColor;\n mask: var(--#{$CSS_VAR_PFX}arrow-down-icon) no-repeat 50% 50%;\n -webkit-mask: var(--#{$CSS_VAR_PFX}arrow-down-icon) no-repeat 50% 50%;\n will-change: transform;\n transition: all var(--#{$CSS_VAR_PFX}bouncing-transition);\n }\n\n // the arrow should have a side space when there is text\n &:not(:empty) {\n &:after {\n @if $IS_LTR {\n margin-left: 0.32em;\n } @else {\n margin-right: 0.32em;\n }\n }\n }\n\n // default is bottom arrow\n &.arrow-flip:after {\n transform: rotate(180deg);\n }\n\n &.arrow-top {\n &:after {\n transform: rotate(180deg);\n }\n\n &.arrow-flip:after {\n transform: rotate(0);\n }\n }\n\n &.arrow-left {\n &:after {\n transform: rotate(90deg);\n }\n\n &.arrow-flip:after {\n transform: rotate(-90deg);\n }\n }\n\n &.arrow-right {\n &:after {\n transform: rotate(-90deg);\n }\n\n &.arrow-flip:after {\n transform: rotate(90deg);\n }\n }\n}\n","// It is basically a button which accepts SVG icon for [::before] as mask.\n%icon-button {\n width: 2.5em;\n height: 2.5em;\n padding: 0.5em;\n color: inherit;\n background: var(--#{$CSS_VAR_PFX}bg-color-dark);\n border: none;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n will-change: transform;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n\n // if does not have button styles, enable scale down effect for active state\n &:not(.button) {\n @media (prefers-reduced-motion: no-preference) {\n &:focus-visible,\n &:active {\n transform: scale(0.85) !important;\n }\n }\n }\n\n &:before {\n content: \" \";\n position: relative;\n z-index: 1;\n display: block;\n width: 100%;\n height: 100%;\n background-color: currentColor;\n }\n}\n\n.close-button {\n @extend %icon-button;\n\n &:before {\n mask: var(--#{$CSS_VAR_PFX}close-icon) no-repeat 50% 50%;\n -webkit-mask: var(--#{$CSS_VAR_PFX}close-icon) no-repeat 50% 50%;\n }\n}\n\n.search-button {\n @extend %icon-button;\n\n &:before {\n mask: var(--#{$CSS_VAR_PFX}search-icon) no-repeat 50% 50%;\n -webkit-mask: var(--#{$CSS_VAR_PFX}search-icon) no-repeat 50% 50%;\n }\n}\n",".button-group {\n display: flex;\n margin: 0.25em 0.125em;\n\n .button {\n border-radius: 0;\n &.outline,\n &.bordered {\n margin: 0 !important;\n }\n }\n\n &:not(.vertical) {\n .button {\n // sometimes on active/focus-visible a white space will be create,\n // to fix this -1px margin is practical.\n margin: 0 -1px !important;\n\n @if $IS_LTR {\n &:first-child {\n border-radius: var(--#{$CSS_VAR_PFX}border-radius) 0 0 var(--#{$CSS_VAR_PFX}border-radius);\n }\n\n &:last-child {\n border-radius: 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0;\n }\n } @else {\n &:first-child {\n border-radius: 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0;\n }\n\n &:last-child {\n border-radius: var(--#{$CSS_VAR_PFX}border-radius) 0 0 var(--#{$CSS_VAR_PFX}border-radius);\n }\n }\n }\n }\n\n &.vertical {\n // sometimes on active/focus-visible a white space will be create,\n // to fix this -1px margin is practical.\n flex-direction: column;\n\n .button {\n margin: -1px 0 !important;\n\n &:first-child {\n border-radius: var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0 0;\n }\n\n &:last-child {\n border-radius: 0 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius);\n }\n }\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}firework-color-main: var(--#{$CSS_VAR_PFX}color-blue-primary);\n --#{$CSS_VAR_PFX}firework-color-center-top-bottom: var(--#{$CSS_VAR_PFX}color-blue-primary);\n --#{$CSS_VAR_PFX}firework-color-center-left-right: var(--#{$CSS_VAR_PFX}color-blue-primary);\n --#{$CSS_VAR_PFX}firework-color-left-top-bottom: var(--#{$CSS_VAR_PFX}color-purple-primary);\n --#{$CSS_VAR_PFX}firework-color-right-top-bottom: var(--#{$CSS_VAR_PFX}color-purple-primary);\n --#{$CSS_VAR_PFX}firework-animation-delay: 0s;\n --#{$CSS_VAR_PFX}firework-animation-duration: 4s;\n --#{$CSS_VAR_PFX}firework-animation-iteration-count: infinite;\n}\n\n.fireworks {\n position: relative;\n z-index: $ZINDEX_FIREWORKS;\n width: 2.5em;\n height: 2em;\n background: transparent;\n animation: flatify-firework ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count);\n\n &:before,\n .spark:before,\n .spark:after {\n content: \" \";\n position: absolute;\n height: 0.25em;\n border-radius: 50em;\n background: var(--#{$CSS_VAR_PFX}firework-color-main);\n }\n\n &:not(.simple):before {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 0.25em;\n margin: auto;\n animation: flatify-firework-main ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count) both;\n }\n\n .spark {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n animation: flatify-firework-sparks ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count) both;\n\n // left-right & top-bottom\n &:nth-child(1),\n &:nth-child(2) {\n &:before,\n &:after {\n top: 0;\n bottom: 0;\n width: 1.5em;\n margin: auto;\n }\n\n &:before {\n left: -0.25em;\n animation: flatify-firework-spark-left ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count);\n }\n &:after {\n right: -0.25em;\n animation: flatify-firework-spark-right ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count);\n }\n }\n\n &:nth-child(1) {\n --#{$CSS_VAR_PFX}firework-color-main: var(--#{$CSS_VAR_PFX}firework-color-center-left-right);\n }\n &:nth-child(2) {\n --#{$CSS_VAR_PFX}firework-color-main: var(--#{$CSS_VAR_PFX}firework-color-center-top-bottom);\n transform: rotate(90deg);\n }\n\n // top-left-top-right & bottom-left-bottom-right\n &:nth-child(3),\n &:nth-child(4) {\n left: 0;\n\n &:before,\n &:after {\n width: 0.75em;\n }\n\n &:before {\n top: 0;\n transform: rotate(45deg);\n animation: flatify-firework-spark-corner-top ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count);\n }\n &:after {\n bottom: 0;\n transform: rotate(-45deg);\n animation: flatify-firework-spark-corner-bottom ease-in-out var(--#{$CSS_VAR_PFX}firework-animation-duration)\n var(--#{$CSS_VAR_PFX}firework-animation-delay) var(--#{$CSS_VAR_PFX}firework-animation-iteration-count);\n }\n }\n\n &:nth-child(3) {\n --#{$CSS_VAR_PFX}firework-color-main: var(--#{$CSS_VAR_PFX}firework-color-left-top-bottom);\n }\n &:nth-child(4) {\n --#{$CSS_VAR_PFX}firework-color-main: var(--#{$CSS_VAR_PFX}firework-color-right-top-bottom);\n transform: rotate(180deg);\n }\n }\n}\n\n@keyframes flatify-firework {\n 0%,\n 20% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-1em);\n }\n 80%,\n 100% {\n transform: translateY(0.5em);\n }\n}\n\n@keyframes flatify-firework-main {\n 0% {\n opacity: 0;\n transform: scale(0) translateY(1em);\n }\n 5% {\n opacity: 1;\n transform: scale(0, 6) translateY(1em);\n }\n 26% {\n transform: scaleY(2) translateY(0);\n }\n 30% {\n transform: scale(9) translateY(0);\n }\n 40%,\n 100% {\n transform: scale(0) translateY(0);\n }\n}\n\n@keyframes flatify-firework-sparks {\n 0%,\n 30% {\n clip-path: circle(0 at center);\n opacity: 0;\n }\n 38% {\n clip-path: circle(100% at center);\n opacity: 1;\n }\n 65%,\n 100% {\n opacity: 0;\n }\n}\n\n// corners\n@keyframes flatify-firework-spark-corner-top {\n 0%,\n 30% {\n opacity: 1;\n clip-path: circle(100% at left);\n transform: scale(1) translate(0) rotate(45deg);\n }\n 40% {\n clip-path: circle(100% at left);\n }\n 60%,\n 100% {\n opacity: 0;\n clip-path: circle(0 at left);\n transform: scale(1.5) translate(-0.5em, -0.25em) rotate(45deg);\n }\n}\n\n@keyframes flatify-firework-spark-corner-bottom {\n 0%,\n 30% {\n opacity: 1;\n clip-path: circle(100% at left);\n transform: scale(1) translate(0) rotate(-45deg);\n }\n 40% {\n clip-path: circle(100% at left);\n }\n 60%,\n 100% {\n opacity: 0;\n clip-path: circle(0 at left);\n transform: scale(1.5) translate(-0.5em, 0.25em) rotate(-45deg);\n }\n}\n\n// left & right\n@keyframes flatify-firework-spark-left {\n 0%,\n 30% {\n opacity: 1;\n clip-path: circle(100% at left);\n transform: scale(1) translate(0);\n }\n 40% {\n clip-path: circle(100% at left);\n }\n 60%,\n 100% {\n opacity: 0;\n clip-path: circle(0 at left);\n transform: scaleX(2) translate(-0.5em);\n }\n}\n\n@keyframes flatify-firework-spark-right {\n 0%,\n 30% {\n opacity: 1;\n clip-path: circle(100% at right);\n transform: scale(1) translate(0);\n }\n 40% {\n clip-path: circle(100% at right);\n }\n 60%,\n 100% {\n opacity: 0;\n clip-path: circle(0 at right);\n transform: scaleX(2) translate(0.5em);\n }\n}\n","// *** General: prefix, rtl and ltr\n// add a prefix before CSS variables to prevent unwanted conflicts.\n$CSS_VAR_PFX: flatify__ !default;\n$IS_LTR: true !default;\n$CENTERED_CONTAINERS: true !default;\n\n// do not change names, just values\n$RESPONSIVE_BREAKPOINTS: (\n xs: 575.98px,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n xxl: 1400px,\n) !default;\n\n// *** Design: border width, radius, opacity, links\n$BORDER_WIDTH: max(2px, 0.18em) !default;\n$BORDER_RADIUS: 1em !default;\n\n// This list will be converted to helper classes.\n// .edge-[]\n$BORDER_RADIUS_LIST: (\n sharp: 0em,\n round-xs: 0.32em,\n round-sm: 0.5em,\n round-md: 0.75em,\n round-lg: 1em,\n circle: 50em,\n oval: 50%,\n triangle: 100% 50% 50% 100% / 75% 69% 69% 75%,\n) !default;\n\n// This list will be converted to helper classes.\n// .width-[]\n$WIDTH_LIST: (\n 0p: 0,\n 10p: 10%,\n 15p: 15%,\n 25p: 25%,\n 30p: 30%,\n 50p: 50%,\n 60p: 60%,\n 75p: 75%,\n 90p: 90%,\n 95p: 95%,\n 100p: 100%,\n) !default;\n\n// This list will be converted to helper classes.\n// .height-[]\n$HEIGHT_LIST: (\n 0p: 0,\n 10p: 10%,\n 15p: 15%,\n 25p: 25%,\n 30p: 30%,\n 50p: 50%,\n 60p: 60%,\n 75p: 75%,\n 90p: 90%,\n 95p: 95%,\n 100p: 100%,\n) !default;\n\n// This list will be converted to helper classes.\n// .opacity-[]\n$OPACITY_LIST: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;\n\n$HOVER_BRIGHTNESS: 95%;\n$BACKDROP_OPACITY: 0.35 !default;\n\n$LINK_DECORATION: none !default;\n$LINK_DECORATION_HOVER: underline 0.125em currentColor !default;\n$LINK_DECORATION_FOCUS: none !default;\n\n// z-index\n$ZINDEX_DROPDOWN: 1000 !default;\n$ZINDEX_STICKY: 1010 !default;\n$ZINDEX_FIXED: 1020 !default;\n$ZINDEX_FIREWORKS: 1025 !default;\n$ZINDEX_BACKDROP: 1030 !default;\n$ZINDEX_MODAL_BACKDROP: 1030 !default;\n$ZINDEX_MODAL: 1040 !default;\n$ZINDEX_POPOVER: 1060 !default;\n$ZINDEX_TOAST: 1100 !default;\n\n// *** Colors: accent color, background color, text color, heading color, palette\n$BG_COLOR: #ffffff !default;\n$BG_COLOR_2: #f1f4f7 !default;\n$BG_COLOR_3: #ced9e3 !default;\n$BG_COLOR_4: #809cb6 !default;\n\n$TXT_COLOR: #2e4051 !default;\n$TXT_COLOR_LIGHT: tint($TXT_COLOR, 35%) !default;\n$TXT_COLOR_DARK: shade($TXT_COLOR, 35%) !default;\n$TXT_COLOR_DARKER: shade($TXT_COLOR, 60%) !default;\n$TXT_COLOR_INVERTED: $BG_COLOR !default;\n\n$BLUE: #1cb0f6 !default;\n$BLUE_LIGHT: tint($BLUE, 40%) !default;\n$BLUE_DARK: shade($BLUE, 15%) !default;\n$BLUE_DARKER: shade($BLUE, 50%) !default;\n\n$GREEN: #58cc02 !default;\n$GREEN_LIGHT: tint($GREEN, 40%) !default;\n$GREEN_DARK: shade($GREEN, 15%) !default;\n$GREEN_DARKER: shade($GREEN, 50%) !default;\n\n$YELLOW: #ffde00 !default;\n$YELLOW_LIGHT: tint($YELLOW, 40%) !default;\n$YELLOW_DARK: shade($YELLOW, 15%) !default;\n$YELLOW_DARKER: shade($YELLOW, 35%) !default;\n\n$ORANGE: #ff9600 !default;\n$ORANGE_LIGHT: tint($ORANGE, 40%) !default;\n$ORANGE_DARK: shade($ORANGE, 15%) !default;\n$ORANGE_DARKER: shade($ORANGE, 50%) !default;\n\n$RED: #ff4b4b !default;\n$RED_LIGHT: tint($RED, 40%) !default;\n$RED_DARK: shade($RED, 15%) !default;\n$RED_DARKER: shade($RED, 50%) !default;\n\n$PINK: #ff86d0 !default;\n$PINK_LIGHT: tint($PINK, 40%) !default;\n$PINK_DARK: shade($PINK, 15%) !default;\n$PINK_DARKER: shade($PINK, 50%) !default;\n\n$PURPLE: #c164ff !default;\n$PURPLE_LIGHT: tint($PURPLE, 40%) !default;\n$PURPLE_DARK: shade($PURPLE, 15%) !default;\n$PURPLE_DARKER: shade($PURPLE, 50%) !default;\n\n$ACCENT_COLOR: $BLUE !default;\n$ACCENT_COLOR_LIGHT: $BLUE_LIGHT !default;\n$ACCENT_COLOR_DARK: $BLUE_DARK !default;\n$ACCENT_COLOR_DARKER: $BLUE_DARKER !default;\n\n$SUCCESS_COLOR: $GREEN !default;\n$SUCCESS_COLOR_LIGHT: $GREEN_LIGHT !default;\n$SUCCESS_COLOR_DARK: $GREEN_DARK !default;\n$SUCCESS_COLOR_DARKER: $GREEN_DARKER !default;\n\n$INFO_COLOR: $BLUE !default;\n$INFO_COLOR_LIGHT: $BLUE_LIGHT !default;\n$INFO_COLOR_DARK: $BLUE_DARK !default;\n$INFO_COLOR_DARKER: $BLUE_DARKER !default;\n\n$WARNING_COLOR: $ORANGE !default;\n$WARNING_COLOR_LIGHT: $ORANGE_LIGHT !default;\n$WARNING_COLOR_DARK: $ORANGE_DARK !default;\n$WARNING_COLOR_DARKER: $ORANGE_DARKER !default;\n\n$DANGER_COLOR: $RED !default;\n$DANGER_COLOR_LIGHT: $RED_LIGHT !default;\n$DANGER_COLOR_DARK: $RED_DARK !default;\n$DANGER_COLOR_DARKER: $RED_DARKER !default;\n\n$LIGHT_COLOR: $BG_COLOR_2 !default;\n$LIGHT_COLOR_LIGHT: $BG_COLOR !default;\n$LIGHT_COLOR_DARK: $BG_COLOR_3 !default;\n$LIGHT_COLOR_DARKER: $BG_COLOR_4 !default;\n\n$DARK_COLOR: $TXT_COLOR !default;\n$DARK_COLOR_LIGHT: $TXT_COLOR_LIGHT !default;\n$DARK_COLOR_DARK: $TXT_COLOR_DARK !default;\n$DARK_COLOR_DARKER: $TXT_COLOR_DARKER !default;\n\n$HEADING_COLOR: currentColor !default;\n\n$LINK_COLOR: $ACCENT_COLOR !default;\n$LINK_COLOR_HOVER: $ACCENT_COLOR_LIGHT !default;\n$LINK_COLOR_FOCUS: $ACCENT_COLOR_DARK !default;\n\n$TAP_HIGHLIGHT_COLOR: transparent !default;\n\n// Do not modify this palette directly\n$PALETTE: (\n blue: (\n primary: $BLUE,\n light: $BLUE_LIGHT,\n dark: $BLUE_DARK,\n darker: $BLUE_DARKER,\n ),\n green: (\n primary: $GREEN,\n light: $GREEN_LIGHT,\n dark: $GREEN_DARK,\n darker: $GREEN_DARKER,\n ),\n yellow: (\n primary: $YELLOW,\n light: $YELLOW_LIGHT,\n dark: $YELLOW_DARK,\n darker: $YELLOW_DARKER,\n ),\n orange: (\n primary: $ORANGE,\n light: $ORANGE_LIGHT,\n dark: $ORANGE_DARK,\n darker: $ORANGE_DARKER,\n ),\n red: (\n primary: $RED,\n light: $RED_LIGHT,\n dark: $RED_DARK,\n darker: $RED_DARKER,\n ),\n pink: (\n primary: $PINK,\n light: $PINK_LIGHT,\n dark: $PINK_DARK,\n darker: $PINK_DARKER,\n ),\n purple: (\n primary: $PURPLE,\n light: $PURPLE_LIGHT,\n dark: $PURPLE_DARK,\n darker: $PURPLE_DARKER,\n ),\n accent: (\n primary: $ACCENT_COLOR,\n light: $ACCENT_COLOR_LIGHT,\n dark: $ACCENT_COLOR_DARK,\n darker: $ACCENT_COLOR_DARKER,\n ),\n success: (\n primary: $SUCCESS_COLOR,\n light: $SUCCESS_COLOR_LIGHT,\n dark: $SUCCESS_COLOR_DARK,\n darker: $SUCCESS_COLOR_DARKER,\n ),\n info: (\n primary: $INFO_COLOR,\n light: $INFO_COLOR_LIGHT,\n dark: $INFO_COLOR_DARK,\n darker: $INFO_COLOR_DARKER,\n ),\n warning: (\n primary: $WARNING_COLOR,\n light: $WARNING_COLOR_LIGHT,\n dark: $WARNING_COLOR_DARK,\n darker: $WARNING_COLOR_DARKER,\n ),\n danger: (\n primary: $DANGER_COLOR,\n light: $DANGER_COLOR_LIGHT,\n dark: $DANGER_COLOR_DARK,\n darker: $DANGER_COLOR_DARKER,\n ),\n light: (\n primary: $LIGHT_COLOR,\n light: $LIGHT_COLOR_LIGHT,\n dark: $LIGHT_COLOR_DARK,\n darker: $LIGHT_COLOR_DARKER,\n ),\n dark: (\n primary: $DARK_COLOR,\n light: $DARK_COLOR_LIGHT,\n dark: $DARK_COLOR_DARK,\n darker: $DARK_COLOR_DARKER,\n ),\n);\n\n// *** Motion: animations, transitions\n$SUPPORT_SMOOTH_SCROLL: true !default;\n\n$SIMPLE_TRANSITION: 0.15s ease-in-out !default; // without specifying properties\n$LONG_TRANSITION: 1s ease-in-out !default; // without specifying properties\n$BOUNCING_TRANSITION: 0.35s cubic-bezier(0.59, -0.39, 0.36, 1.38) !default; // without specifying properties\n\n$ACCORDION_SHOW_ANIMATION_DURATION: 300ms !default;\n$ACCORDION_HIDE_ANIMATION_DURATION: 200ms !default;\n$ALERT_HIDE_ANIMATION_DURATION: 300ms !default;\n$ALERT_SHOW_ANIMATION_DURATION: 200ms !default;\n$DROPDOWN_SHOW_ANIMATION_DURATION: 300ms !default;\n$DROPDOWN_HIDE_ANIMATION_DURATION: 200ms !default;\n$MODAL_SHOW_ANIMATION_DURATION: 350ms !default;\n$MODAL_HIDE_ANIMATION_DURATION: 250ms !default;\n// submenu works with CSS, so it is not possible to set hide animation.\n$SUBMENU_SHOW_ANIMATION_DURATION: 350ms !default;\n$SUBMENU_SHOW_ANIMATION_DELAY: 200ms !default;\n$TAB_SHOW_ANIMATION_DURATION: 300ms !default;\n$TAB_HIDE_ANIMATION_DURATION: 200ms !default;\n$TOAST_SHOW_ANIMATION_DURATION: 300ms !default;\n$TOAST_HIDE_ANIMATION_DURATION: 200ms !default;\n\n// *** Typography: font size, font family, line height\n$MIN_FONT_SIZE: 85% !default; // must be percent\n$MAX_FONT_SIZE: 100% !default; // must be percent\n$PRIMARY_FONT_FAMILY: \"Nunito\", sans-serif !default;\n$HEADING_FONT_FAMILY: $PRIMARY_FONT_FAMILY !default;\n$CODE_FONT_FAMILY: \"Fira Code\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n\n// This list will be converted to helper classes.\n// .size-[] | .text-[]\n$FONT_SIZE_LIST: (\n xs: 0.75em,\n sm: 0.9em,\n md: 1em,\n lg: 1.25em,\n 2x: 1.5em,\n 3x: 2.2em,\n 4x: 2.5em,\n 5x: 3.14em,\n) !default;\n\n$MEDIUM_FONT_WEIGHT: 600 !default;\n$BOLD_FONT_WEIGHT: 700 !default;\n$EXTRA_BOLD_FONT_WEIGHT: 900 !default;\n\n$BASE_LINE_HEIGHT: 1.5 !default;\n$SMALL_LINE_HEIGHT: 1.2 !default;\n$LARGE_LINE_HEIGHT: 1.8 !default;\n\n$BODY_TEXT_ALIGN: initial !default;\n\n$HEADING_MARGIN_BOTTOM: 0.5em !default;\n$HEADING_FONT_STYLE: normal !default;\n$HEADING_FONT_WEIGHT: bold !default;\n\n$PARAGRAPH_MARGIN_BOTTOM: 2em !default;\n\n// ICONS\n$ARROW_DOWN_ICON: url('data:image/svg+xml; utf8,
') !default;\n$BLOCKQUOTE_ICON: url('data:image/svg+xml; utf8,
') !default;\n$CLOSE_ICON: url('data:image/svg+xml; utf8,
') !default;\n$EYE_ICON: url('data:image/svg+xml; utf8,
') !default;\n$SEARCH_ICON: url('data:image/svg+xml; utf8,
') !default;\n$SELECT_ICON: url('data:image/svg+xml; utf8,
') !default;\n",":root {\n --#{$CSS_VAR_PFX}card-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}card-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}card-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n}\n\n.card {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}card-txt-color);\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}card-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}card-border-color);\n overflow: hidden;\n position: relative;\n display: flex;\n flex-grow: 1;\n max-width: 100%;\n padding: 0.75em;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &:not(.horizontal) {\n flex-direction: column;\n width: 20em;\n\n .card-badges {\n @if $IS_LTR {\n right: 0.5em;\n } @else {\n left: 0.5em;\n }\n }\n }\n\n &.horizontal {\n gap: 1em;\n\n .card-header {\n width: 40%;\n\n .card-badges {\n @if $IS_LTR {\n left: 0.5em;\n } @else {\n right: 0.5em;\n }\n }\n }\n\n .card-image {\n height: 100%;\n }\n\n .card-right {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n width: 60%;\n }\n }\n\n .card-header {\n overflow: hidden;\n position: relative;\n font-size: 1.2em;\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.6);\n\n .card-badges {\n position: absolute;\n top: 0.5em;\n display: flex;\n gap: 0.38em;\n }\n }\n\n .card-body {\n hyphens: auto;\n height: 100%;\n }\n\n .card-footer {\n display: flex;\n align-items: center;\n font-size: 0.9em;\n padding-top: 0.75em;\n\n .button {\n padding-top: 0.64em;\n padding-bottom: 0.32em;\n }\n }\n\n .card-image {\n width: 100%;\n height: 10em;\n object-fit: cover;\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.6);\n }\n\n .card-title {\n font-size: 1.2em;\n margin: 0.75em 0 0.38em;\n }\n}\n",":root {\n // menu and its items\n --#{$CSS_VAR_PFX}menu-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}menu-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}menu-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n\n --#{$CSS_VAR_PFX}menu-active-item-bg-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}menu-active-item-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n\n --#{$CSS_VAR_PFX}menu-item-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}menu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}menu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}bg-color-dark);\n\n --#{$CSS_VAR_PFX}menu-item-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}menu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}menu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}txt-color);\n\n // submenu and its items\n --#{$CSS_VAR_PFX}submenu-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}submenu-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}submenu-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n\n --#{$CSS_VAR_PFX}submenu-item-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}submenu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}submenu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}bg-color-dark);\n\n --#{$CSS_VAR_PFX}submenu-item-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}submenu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}submenu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}txt-color);\n\n --#{$CSS_VAR_PFX}submenu-animation-show-duration: #{$SUBMENU_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}submenu-animation-show-delay: #{$SUBMENU_SHOW_ANIMATION_DELAY};\n\n --#{$CSS_VAR_PFX}submenu-animation-show: flatify-dropdown-show var(--#{$CSS_VAR_PFX}submenu-animation-show-duration)\n var(--#{$CSS_VAR_PFX}submenu-animation-show-delay) cubic-bezier(0.52, 0.42, 0.44, 1.44) both;\n}\n\n.menu-items-wrapper {\n list-style: none;\n padding: 0.5em;\n margin: 0;\n color: var(--#{$CSS_VAR_PFX}menu-txt-color);\n background: var(--#{$CSS_VAR_PFX}menu-bg-color);\n\n &.navbar {\n scrollbar-width: thin;\n display: flex;\n align-items: center;\n width: 100%;\n height: 4.25em;\n padding-left: 1.24em;\n padding-right: 1.24em;\n border-bottom: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}menu-border-color);\n\n // scrollable navbar does not support dropdown or submenu, but it a good choice especially for small screens\n &.scrollable-x,\n &.scrollable {\n // for small screen it should have a minimum width to prevent being compressed\n .search-bar {\n min-width: 12em;\n }\n }\n\n .links {\n white-space: nowrap;\n list-style: none;\n display: flex;\n padding: 0;\n margin-bottom: 0;\n\n .menu-item {\n position: relative;\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.9);\n\n button,\n a {\n color: inherit;\n font-size: 1em;\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n background: transparent;\n }\n\n &.active {\n font-weight: var(--#{$CSS_VAR_PFX}bold-font-weight);\n }\n\n // show submenu on parent hover or when child is focused\n &:focus-within > .submenu,\n &:hover > .submenu {\n display: block;\n animation: var(--#{$CSS_VAR_PFX}submenu-animation-show);\n }\n\n .submenu {\n position: absolute;\n top: 100%;\n @if $IS_LTR {\n left: 0.5em;\n } @else {\n right: 0.5em;\n }\n z-index: 10;\n display: none;\n\n // second level or more\n .submenu {\n top: -50%;\n @if $IS_LTR {\n left: 115%;\n } @else {\n right: 115%;\n }\n\n // this a middleman to preserve connection between parent menu item\n // and its children list on hover\n &:after {\n content: \" \";\n position: absolute;\n top: 0.64em;\n @if $IS_LTR {\n left: -3.6em;\n } @else {\n right: -3.6em;\n }\n width: 4em;\n min-height: 4em;\n // it will block other submenus\n // height: 50%;\n background: transparent !important;\n border-radius: 1em;\n }\n }\n }\n }\n }\n\n .navbar-logo {\n height: 3em;\n\n img {\n height: 100%;\n }\n\n @if $IS_LTR {\n margin-right: 0.64em;\n } @else {\n margin-left: 0.64em;\n }\n }\n }\n\n &[class*=\"style-\"] {\n --#{$CSS_VAR_PFX}menu-active-item-bg-color: var(--#{$CSS_VAR_PFX}local-border-color);\n --#{$CSS_VAR_PFX}menu-active-item-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}menu-item-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}menu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}menu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}menu-item-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}menu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}menu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}local-txt-color);\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n margin: 0 0.25em;\n color: var(--#{$CSS_VAR_PFX}menu-item-txt-color);\n background: var(--#{$CSS_VAR_PFX}menu-item-bg-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.75);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n\n &.disabled {\n pointer-events: none;\n user-select: none;\n opacity: 0.5;\n }\n\n & > button,\n & > a {\n width: 100%;\n padding: 0.64em 1em;\n color: inherit;\n text-decoration: none !important;\n }\n\n &:hover {\n color: var(--#{$CSS_VAR_PFX}menu-item-txt-color__hover);\n background: var(--#{$CSS_VAR_PFX}menu-item-bg-color__hover);\n }\n\n &.active {\n color: var(--#{$CSS_VAR_PFX}menu-active-item-txt-color);\n background: var(--#{$CSS_VAR_PFX}menu-active-item-bg-color);\n }\n\n // menu items are not focusable because they are usually
\n &:focus,\n &:focus-within {\n color: var(--#{$CSS_VAR_PFX}menu-item-txt-color__focus);\n background: var(--#{$CSS_VAR_PFX}menu-item-bg-color__focus);\n }\n }\n}\n\n.dropdown,\n.menu-items-wrapper .submenu {\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}submenu-bg-color);\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}submenu-txt-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}submenu-border-color);\n position: relative;\n min-width: 12em;\n padding: 0.5em;\n margin-bottom: 0;\n color: var(--#{$CSS_VAR_PFX}submenu-txt-color);\n background: var(--#{$CSS_VAR_PFX}submenu-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &[class*=\"style-\"] {\n --#{$CSS_VAR_PFX}submenu-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}submenu-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}submenu-border-color: var(--#{$CSS_VAR_PFX}local-border-color);\n --#{$CSS_VAR_PFX}submenu-item-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}submenu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}submenu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}submenu-item-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}submenu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}submenu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}local-txt-color);\n }\n\n .menu-item {\n font-size: 0.9em;\n margin: 0;\n color: var(--#{$CSS_VAR_PFX}submenu-item-txt-color);\n background: var(--#{$CSS_VAR_PFX}submenu-item-bg-color);\n\n &:not(:first-child) {\n margin-top: 0.32em;\n }\n\n a {\n padding: 0.64em 1.25em;\n }\n\n &:hover {\n color: var(--#{$CSS_VAR_PFX}submenu-item-txt-color__hover);\n background: var(--#{$CSS_VAR_PFX}submenu-item-bg-color__hover);\n }\n\n &.active {\n color: var(--#{$CSS_VAR_PFX}submenu-active-item-txt-color);\n background: var(--#{$CSS_VAR_PFX}submenu-active-item-bg-color);\n }\n\n &:focus,\n &:focus-within {\n color: var(--#{$CSS_VAR_PFX}submenu-item-txt-color__focus);\n background: var(--#{$CSS_VAR_PFX}submenu-item-bg-color__focus);\n }\n\n // additional space for menu item arrow\n &.arrow-button:after {\n @if $IS_LTR {\n margin-right: 0.75em;\n } @else {\n margin-left: 0.75em;\n }\n }\n\n &.heading {\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n padding: 1em 0.75em 0.5em;\n color: var(--#{$CSS_VAR_PFX}submenu-txt-color) !important;\n background: var(--#{$CSS_VAR_PFX}submenu-bg-color) !important;\n }\n\n &.separator {\n height: var(--#{$CSS_VAR_PFX}border-width);\n margin: 0.5em 0 !important;\n background: var(--#{$CSS_VAR_PFX}local-border-color) !important;\n opacity: 0.5;\n }\n }\n\n .pointer-arrow,\n &[class*=\"arrow-\"]:before {\n content: \" \";\n position: absolute;\n height: 0;\n width: 0;\n border-style: solid;\n will-change: top, bottom, left, right;\n }\n\n &[data-popper-placement=\"bottom\"] .pointer-arrow,\n &.arrow-top:before {\n top: -0.5em;\n bottom: -0.5em;\n border-width: 0 0.64em 0.64em 0.64em;\n border-color: var(--#{$CSS_VAR_PFX}local-bg-color) transparent;\n filter: drop-shadow(0 calc(var(--#{$CSS_VAR_PFX}border-width) * -1) 0 var(--#{$CSS_VAR_PFX}local-border-color));\n }\n\n &[data-popper-placement=\"top\"] .pointer-arrow,\n &.arrow-bottom:before {\n bottom: -0.5em;\n border-width: 0.64em 0.64em 0 0.64em;\n border-color: var(--#{$CSS_VAR_PFX}local-bg-color) transparent;\n filter: drop-shadow(0 var(--#{$CSS_VAR_PFX}border-width) 0 var(--#{$CSS_VAR_PFX}local-border-color));\n }\n\n &[data-popper-placement=\"right\"] .pointer-arrow,\n &.arrow-left:before {\n left: -0.5em;\n border-width: 0.64em 0.64em 0.64em 0;\n border-color: transparent var(--#{$CSS_VAR_PFX}local-bg-color);\n filter: drop-shadow(calc(var(--#{$CSS_VAR_PFX}border-width) * -1) 0 0 var(--#{$CSS_VAR_PFX}local-border-color));\n }\n\n &[data-popper-placement=\"left\"] .pointer-arrow,\n &.arrow-right:before {\n right: -0.5em;\n border-width: 0.64em 0 0.64em 0.64em;\n border-color: transparent var(--#{$CSS_VAR_PFX}local-bg-color);\n filter: drop-shadow(var(--#{$CSS_VAR_PFX}border-width) 0 0 var(--#{$CSS_VAR_PFX}local-border-color));\n }\n\n &.arrow-top:before,\n &.arrow-bottom:before {\n @if $IS_LTR {\n left: 2em;\n } @else {\n right: 2em;\n }\n }\n &.arrow-left:before,\n &.arrow-right:before {\n top: 2em;\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}dropdown-animation-show-duration: #{$DROPDOWN_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}dropdown-animation-hide-duration: #{$DROPDOWN_HIDE_ANIMATION_DURATION};\n\n --#{$CSS_VAR_PFX}dropdown-animation-show: flatify-dropdown-show var(--#{$CSS_VAR_PFX}dropdown-animation-show-duration)\n cubic-bezier(0.52, 0.42, 0.44, 1.44);\n --#{$CSS_VAR_PFX}dropdown-animation-hide: flatify-dropdown-hide var(--#{$CSS_VAR_PFX}dropdown-animation-hide-duration)\n cubic-bezier(0.52, 0.42, 0.44, 1.44) both;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: inline-block;\n\n &:not(.free-size) {\n .dropdown {\n width: 110%;\n }\n }\n}\n\n.dropdown {\n position: absolute;\n z-index: $ZINDEX_DROPDOWN;\n display: none;\n will-change: top, bottom, left, right;\n\n &.show {\n display: block;\n animation: var(--#{$CSS_VAR_PFX}dropdown-animation-show);\n }\n\n &.dropdown-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}dropdown-animation-hide);\n }\n}\n",".popover {\n .dropdown {\n font-size: 0.9em;\n z-index: $ZINDEX_POPOVER;\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}modal-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}modal-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}modal-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n\n // *** modal animations\n --#{$CSS_VAR_PFX}modal-animation-show-duration: #{$MODAL_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}modal-animation-hide-duration: #{$MODAL_HIDE_ANIMATION_DURATION};\n\n // default\n --#{$CSS_VAR_PFX}modal-animation-default-show: flatify-blow-in var(--#{$CSS_VAR_PFX}modal-animation-show-duration)\n cubic-bezier(0.52, 0.42, 0.44, 1.44);\n --#{$CSS_VAR_PFX}modal-animation-default-hide: flatify-blow-out var(--#{$CSS_VAR_PFX}modal-animation-hide-duration)\n cubic-bezier(0.52, 0.42, 0.44, 1.44) both;\n\n // top\n --#{$CSS_VAR_PFX}modal-animation-top-show: flatify-slide-down-in var(--#{$CSS_VAR_PFX}modal-animation-show-duration)\n ease;\n --#{$CSS_VAR_PFX}modal-animation-top-hide: flatify-slide-down-out var(--#{$CSS_VAR_PFX}modal-animation-hide-duration)\n ease both;\n\n // bottom\n --#{$CSS_VAR_PFX}modal-animation-bottom-show: flatify-slide-up-in var(--#{$CSS_VAR_PFX}modal-animation-show-duration)\n ease;\n --#{$CSS_VAR_PFX}modal-animation-bottom-hide: flatify-slide-up-out var(--#{$CSS_VAR_PFX}modal-animation-hide-duration)\n ease both;\n\n // left\n --#{$CSS_VAR_PFX}modal-animation-left-show: flatify-slide-right-in var(--#{$CSS_VAR_PFX}modal-animation-show-duration)\n ease;\n --#{$CSS_VAR_PFX}modal-animation-left-hide: flatify-slide-right-out\n var(--#{$CSS_VAR_PFX}modal-animation-hide-duration) ease both;\n\n // right\n --#{$CSS_VAR_PFX}modal-animation-right-show: flatify-slide-left-in var(--#{$CSS_VAR_PFX}modal-animation-show-duration)\n ease;\n --#{$CSS_VAR_PFX}modal-animation-right-hide: flatify-slide-left-out\n var(--#{$CSS_VAR_PFX}modal-animation-hide-duration) ease both;\n}\n\n$modal-border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n\n.modal {\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}modal-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}modal-border-color);\n // Basically there is no need for scrolling, if there is it should be the [.modal-body] not the modal itself.\n overflow: hidden;\n position: fixed;\n z-index: $ZINDEX_MODAL;\n top: 5em;\n left: 0;\n right: 0;\n display: none;\n width: 90%;\n height: fit-content;\n max-width: 32em; // 512px\n margin: 0 auto;\n color: var(--#{$CSS_VAR_PFX}modal-txt-color);\n background: var(--#{$CSS_VAR_PFX}modal-bg-color);\n border: $modal-border;\n box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &.modal-sm {\n font-size: 0.9em;\n max-width: 20em;\n }\n\n &.modal-lg {\n font-size: 1.2em;\n max-width: 45em;\n }\n\n &.show {\n display: block;\n animation: var(--#{$CSS_VAR_PFX}modal-animation-default-show);\n }\n\n &.modal-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-default-hide);\n }\n\n &.modal-center {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n }\n &.modal-top {\n bottom: unset;\n top: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n border-top: none !important;\n border-radius: 0 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius);\n\n &.show {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-top-show);\n }\n\n &.modal-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-top-hide);\n }\n }\n &.modal-bottom {\n top: unset;\n bottom: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n border-bottom: none !important;\n box-shadow: inset 0 0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0 0;\n\n &.show {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-bottom-show);\n }\n\n &.modal-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-bottom-hide);\n }\n }\n &.modal-left {\n right: unset;\n left: 0;\n top: 0;\n bottom: 0;\n margin: auto 0;\n border-left: none !important;\n box-shadow: inset -0.125em 0 0 var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0;\n\n &.show {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-left-show);\n }\n\n &.modal-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-left-hide);\n }\n }\n &.modal-right {\n left: unset;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto 0;\n border-right: none !important;\n box-shadow: inset 0.125em 0 0 var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius) 0 0 var(--#{$CSS_VAR_PFX}border-radius);\n\n &.show {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-right-show);\n }\n\n &.modal-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}modal-animation-right-hide);\n }\n }\n\n &.bordered {\n .modal-header {\n border-bottom: $modal-border;\n }\n .modal-footer {\n border-top: $modal-border;\n }\n }\n\n // Do not limit width when width setter class is added.\n &[class*=\"width-\"] {\n max-width: unset;\n }\n\n .close-modal {\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n }\n}\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75em 1.25em;\n\n .modal-title {\n font-size: 1.4em;\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n margin-bottom: 0;\n }\n}\n\n.modal-body {\n flex-grow: 1; // fill the space when height is 100%\n padding: 0.75em 1.25em;\n}\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5em 1.25em;\n}\n",":root {\n --#{$CSS_VAR_PFX}loading-color: currentColor;\n --#{$CSS_VAR_PFX}loading-dot-width: 0.5em;\n --#{$CSS_VAR_PFX}loading-dot-height: 0.5em;\n --#{$CSS_VAR_PFX}loading-dot-animation-start-scale: 1.5;\n --#{$CSS_VAR_PFX}loading-dot-animation-duration: 1.2s;\n --#{$CSS_VAR_PFX}loading-spinner-animation-duration: 0.75s;\n}\n\n%loading-dot {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}loading-color);\n display: block;\n width: var(--#{$CSS_VAR_PFX}loading-dot-width);\n height: var(--#{$CSS_VAR_PFX}loading-dot-height);\n background: var(--#{$CSS_VAR_PFX}local-txt-color);\n border-radius: 10em;\n opacity: 0;\n}\n\n.loading {\n @extend %loading-dot;\n position: relative;\n margin-right: calc(var(--#{$CSS_VAR_PFX}loading-dot-width) * 4);\n // first of all parent should be shown\n animation: flatify-loading-dot-first var(--#{$CSS_VAR_PFX}loading-dot-animation-duration) infinite;\n\n &.stop-animation:before,\n &.stop-animation:after,\n &.stop-animation {\n opacity: 1 !important;\n }\n\n &:before,\n &:after {\n content: \" \";\n position: absolute;\n @extend %loading-dot;\n }\n\n &:before {\n left: calc(var(--#{$CSS_VAR_PFX}loading-dot-width) * 2);\n animation: flatify-loading-dot-second var(--#{$CSS_VAR_PFX}loading-dot-animation-duration) infinite;\n }\n\n &:after {\n left: calc(var(--#{$CSS_VAR_PFX}loading-dot-width) * 4);\n animation: flatify-loading-dot-third var(--#{$CSS_VAR_PFX}loading-dot-animation-duration) infinite;\n }\n}\n\n.overlay-layer {\n & > .spinner,\n & > .loading {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 12;\n margin: auto;\n }\n\n & > .loading {\n left: calc(var(--#{$CSS_VAR_PFX}loading-dot-width) * -4);\n }\n\n // if spinner is inside button make it smaller\n &.button > .spinner {\n font-size: 0.9em;\n }\n}\n\n.spinner {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}loading-color);\n display: flex;\n justify-content: space-between;\n width: 2em;\n height: 2em;\n // padding: 0.25em; // is not a wise choice with EM and spin animation, it ruins the circle radius\n border: 0.25em solid transparent;\n border-radius: 50em;\n\n &[class*=\"style-\"] {\n border-color: transparent !important;\n }\n\n &:before {\n content: \" \";\n position: relative;\n width: 100%;\n height: 100%;\n border: 0.25em solid var(--#{$CSS_VAR_PFX}local-txt-color);\n @if $IS_LTR {\n border-left-color: transparent;\n } @else {\n border-right-color: transparent;\n }\n border-radius: 50em;\n animation: flatify-spin var(--#{$CSS_VAR_PFX}loading-spinner-animation-duration) linear infinite;\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}progress-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}progress-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted);\n --#{$CSS_VAR_PFX}progress-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}progress-animation-duration: 2.5s;\n}\n\n.progress {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}progress-txt-color);\n overflow: hidden;\n display: block;\n width: 100%;\n margin: 0.5em 0;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}progress-bg-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &.bordered {\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}progress-border-color);\n }\n\n .progress-bar {\n overflow: hidden;\n position: relative;\n font-size: 0.75em;\n min-height: 1.4em;\n padding: 0.125em 0.5em;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}color-accent-primary);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n will-change: width, transform;\n transition: width var(--#{$CSS_VAR_PFX}long-transition), transform var(--#{$CSS_VAR_PFX}long-transition),\n background var(--#{$CSS_VAR_PFX}simple-transition);\n\n &:after {\n content: \" \";\n position: absolute;\n top: 30%;\n left: 0;\n right: 0;\n width: min(90%, calc(100% - 2em));\n height: 0.32em;\n margin: 0 auto;\n background: currentColor;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n opacity: 0.2;\n }\n }\n\n &.processing {\n cursor: wait;\n\n .progress-bar {\n &:before {\n content: \" \";\n position: absolute;\n top: 0;\n @if $IS_LTR {\n left: 0;\n transform-origin: left;\n } @else {\n right: 0;\n transform-origin: right;\n }\n\n width: 100%;\n // 110% because of FireFox bug\n height: 110%;\n background: var(--#{$CSS_VAR_PFX}color-accent-light);\n // mix-blend-mode: color-dodge;\n animation: flatify-processing linear var(--#{$CSS_VAR_PFX}progress-animation-duration) infinite;\n }\n }\n }\n}\n",".search-bar {\n position: relative;\n\n input[type=\"text\"],\n input[type=\"search\"] {\n width: 100%;\n\n @if $IS_LTR {\n padding-right: 3.14em;\n } @else {\n padding-left: 3.14em;\n }\n\n // on focus background should be lighter.\n &.style-light:focus {\n background: var(--#{$CSS_VAR_PFX}bg-color) !important;\n filter: none !important;\n }\n }\n\n .search-button {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 2.2em;\n height: 2.2em;\n margin: auto 0;\n font-size: 1em;\n color: var(--#{$CSS_VAR_PFX}form-element-txt-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.75);\n\n @if $IS_LTR {\n right: 0.5em;\n } @else {\n left: 0.5em;\n }\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}tab-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}tab-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}tab-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n\n --#{$CSS_VAR_PFX}tab-animation-show-duration: #{$TAB_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}tab-animation-hide-duration: #{$TAB_HIDE_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}tab-animation-show: flatify-blow-in var(--#{$CSS_VAR_PFX}tab-animation-show-duration) ease;\n --#{$CSS_VAR_PFX}tab-animation-hide: flatify-blow-out var(--#{$CSS_VAR_PFX}tab-animation-hide-duration)\n cubic-bezier(0.52, 0.42, 0.44, 1.44) both;\n}\n\n// if color setter classes are used, reset tab CSS variables to local\n.tabs-wrapper[class*=\"style-\"],\n.tabs-header[class*=\"style-\"],\n.tabs-content[class*=\"style-\"] {\n --#{$CSS_VAR_PFX}tab-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}tab-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}tab-border-color: var(--#{$CSS_VAR_PFX}local-border-color);\n\n .tab-button.active {\n color: var(--#{$CSS_VAR_PFX}tab-txt-color);\n }\n}\n\n.tabs-wrapper {\n overflow: hidden;\n margin: 1em 0;\n color: var(--#{$CSS_VAR_PFX}tab-txt-color);\n background: var(--#{$CSS_VAR_PFX}tab-bg-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &.bordered {\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}tab-border-color);\n box-shadow: 0 0.125em 0 var(--#{$CSS_VAR_PFX}tab-border-color);\n }\n}\n\n.tabs-header {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n padding: 0 1em;\n color: var(--#{$CSS_VAR_PFX}tab-txt-color);\n background: var(--#{$CSS_VAR_PFX}tab-bg-color);\n border-bottom: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}tab-border-color);\n\n &.scrollable {\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n\n .tab-button {\n white-space: nowrap;\n }\n\n // because of the scrollbar they should stick to beginning of the container\n &:not(.line-at-top) {\n .tab-button:before {\n bottom: -1px;\n }\n }\n }\n\n @include break-xs() {\n font-size: 0.9em;\n padding: 0;\n }\n\n .tab-button {\n position: relative;\n text-align: center;\n font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);\n appearance: none;\n vertical-align: middle;\n width: auto;\n height: 100%;\n padding: 0.75em 1.5em;\n margin: 0 0.38em;\n text-decoration: none !important;\n color: inherit !important;\n background: transparent;\n border: none;\n outline: none;\n opacity: 0.6;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition) !important;\n\n &:hover,\n &:focus {\n opacity: 1;\n\n &:not(.active):before {\n transform: scaleY(1.2) scaleX(0.85);\n }\n }\n\n &:before {\n content: \" \";\n position: absolute;\n bottom: calc(var(--#{$CSS_VAR_PFX}border-width) * -0.5);\n left: 0;\n width: 100%;\n height: calc(var(--#{$CSS_VAR_PFX}border-width) * 1.5);\n background: var(--#{$CSS_VAR_PFX}tab-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.32) calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.32) 0\n 0;\n transform-origin: bottom center;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition) !important;\n }\n &:not(.active) {\n &:before {\n transform: scaleY(0);\n }\n }\n\n &.active {\n color: var(--#{$CSS_VAR_PFX}color-accent-primary) !important;\n opacity: 1;\n\n &:before {\n background: var(--#{$CSS_VAR_PFX}color-accent-primary);\n }\n }\n\n .badge {\n vertical-align: middle;\n\n @if $IS_LTR {\n margin-left: 0.5em;\n } @else {\n margin-right: 0.5em;\n }\n }\n }\n\n &.line-at-top {\n .tab-button:before {\n bottom: unset;\n top: 0;\n border-radius: 0 0 calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.32)\n calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.32);\n transform-origin: top center;\n }\n }\n}\n\n.tabs-content {\n overflow: hidden;\n color: var(--#{$CSS_VAR_PFX}tab-txt-color);\n background: var(--#{$CSS_VAR_PFX}tab-bg-color);\n\n .tab-panel {\n padding: 1em;\n }\n\n .tab-panel:not(.show) {\n display: none !important;\n }\n\n &.no-animation {\n .tab-panel {\n animation-duration: 0s !important;\n }\n }\n\n &.slide-animation {\n .tab-panel.show {\n &.slide-left {\n animation: flatify-slide-left-in-min var(--#{$CSS_VAR_PFX}tab-animation-show-duration) ease;\n &.tab-will-be-hidden {\n animation: flatify-slide-left-out-min var(--#{$CSS_VAR_PFX}tab-animation-hide-duration) ease;\n }\n }\n &.slide-right {\n animation: flatify-slide-right-in-min var(--#{$CSS_VAR_PFX}tab-animation-show-duration) ease;\n &.tab-will-be-hidden {\n animation: flatify-slide-right-out-min var(--#{$CSS_VAR_PFX}tab-animation-hide-duration) ease;\n }\n }\n }\n }\n\n &.fade-animation {\n .tab-panel.show {\n animation: flatify-fade-in var(--#{$CSS_VAR_PFX}tab-animation-show-duration) ease;\n\n &.tab-will-be-hidden {\n animation: flatify-fade-out var(--#{$CSS_VAR_PFX}tab-animation-hide-duration) ease;\n }\n }\n }\n}\n\n.tab-panel.show {\n animation: var(--#{$CSS_VAR_PFX}tab-animation-show);\n\n &.tab-will-be-hidden {\n animation: var(--#{$CSS_VAR_PFX}tab-animation-hide);\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}toast-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}toast-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}toast-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}toast-inner-space: 2.5em;\n --#{$CSS_VAR_PFX}toast-animation-show-duration: #{$TOAST_SHOW_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}toast-animation-hide-duration: #{$TOAST_HIDE_ANIMATION_DURATION};\n --#{$CSS_VAR_PFX}toast-animation-show: flatify-slide-up-in-min var(--#{$CSS_VAR_PFX}toast-animation-show-duration)\n ease;\n --#{$CSS_VAR_PFX}toast-animation-hide: flatify-slide-down-out-min var(--#{$CSS_VAR_PFX}toast-animation-hide-duration)\n ease both;\n}\n\n.toast-wrapper {\n position: fixed;\n width: 20em;\n max-width: 100vw;\n display: flex;\n flex-direction: column;\n z-index: $ZINDEX_TOAST;\n\n &.bottom {\n flex-direction: column-reverse;\n bottom: var(--#{$CSS_VAR_PFX}toast-inner-space);\n }\n &.top {\n flex-direction: column;\n top: var(--#{$CSS_VAR_PFX}toast-inner-space);\n }\n &.left {\n left: var(--#{$CSS_VAR_PFX}toast-inner-space);\n }\n &.right {\n right: var(--#{$CSS_VAR_PFX}toast-inner-space);\n }\n &.center {\n left: 0;\n right: 0;\n margin: 0 auto;\n }\n\n @include break-xs() {\n &.left,\n &.right {\n left: 0;\n right: 0;\n margin: 0 auto;\n }\n --#{$CSS_VAR_PFX}toast-inner-space: 0.5em;\n width: calc(100% - 1em);\n }\n}\n\n.toast {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}toast-txt-color);\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}toast-bg-color);\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}toast-border-color);\n overflow: hidden;\n position: relative;\n width: 100%;\n padding: 0.9em;\n margin: 0.25em 0;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);\n box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n\n &:not(.toast-will-be-removed) {\n animation: var(--#{$CSS_VAR_PFX}toast-animation-show);\n }\n\n &.toast-will-be-removed {\n animation: var(--#{$CSS_VAR_PFX}toast-animation-hide);\n }\n\n &:hover {\n .close-button {\n transition-delay: 0.15s;\n transform: scale(1);\n }\n }\n\n .toast-svg {\n display: inline-block;\n width: 2em;\n max-height: 2em;\n @if $IS_LTR {\n margin-right: 0.32em;\n } @else {\n margin-left: 0.32em;\n }\n opacity: 0.75;\n\n &:not([fill=\"none\"]) {\n fill: currentColor;\n }\n }\n\n .close-button {\n position: absolute;\n top: 0;\n bottom: 0;\n @if $IS_LTR {\n right: 0.25em;\n } @else {\n left: 0.25em;\n }\n font-size: 0.85em;\n margin: auto 0;\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n box-shadow: 0 0 0.32em 0.32em var(--#{$CSS_VAR_PFX}local-bg-color);\n transform: scale(0);\n }\n}\n",":root {\n --#{$CSS_VAR_PFX}form-element-accent-color: var(--#{$CSS_VAR_PFX}color-accent-primary);\n --#{$CSS_VAR_PFX}form-element-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);\n --#{$CSS_VAR_PFX}form-element-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n --#{$CSS_VAR_PFX}form-element-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(--#{$CSS_VAR_PFX}form-element-accent-color);\n --#{$CSS_VAR_PFX}form-element-border-color__valid: var(--#{$CSS_VAR_PFX}color-success-primary);\n --#{$CSS_VAR_PFX}form-element-border-color__warning: var(--#{$CSS_VAR_PFX}color-warning-primary);\n --#{$CSS_VAR_PFX}form-element-border-color__invalid: var(--#{$CSS_VAR_PFX}color-danger-primary);\n}\n\n.form-label {\n &:not(:first-of-type) {\n margin-top: 0.9em;\n }\n\n &.inline:not(:first-child) {\n @if $IS_LTR {\n margin-left: 0.38em;\n } @else {\n margin-right: 0.38em;\n }\n }\n\n &:not(.inline) {\n display: block;\n @if $IS_LTR {\n margin-left: 0.38em;\n } @else {\n margin-right: 0.38em;\n }\n }\n}\n\n// [.floating-label] should added to [.input-wrapper]\n.floating-label {\n textarea,\n input {\n padding: 1.64em 1em 0.5em !important;\n\n &:not(:placeholder-shown) + .form-label,\n &:focus + .form-label {\n opacity: 0.5;\n transform: scale(0.75) translateY(-0.9em);\n }\n\n &::placeholder {\n opacity: 0 !important;\n }\n }\n\n .form-label {\n pointer-events: none;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto 0;\n height: fit-content;\n opacity: 0.8;\n will-change: opacity, transform;\n transition: all var(--#{$CSS_VAR_PFX}bouncing-transition);\n\n @if $IS_LTR {\n transform-origin: top left;\n left: 1em;\n } @else {\n transform-origin: top right;\n right: 1em;\n }\n }\n\n &.is-textarea {\n .form-label {\n top: 1.5em;\n bottom: unset;\n }\n }\n}\n\n%form-element {\n font-size: 0.9em;\n padding: 0.8em 1em;\n margin: 0.38em 0;\n color: var(--#{$CSS_VAR_PFX}form-element-txt-color);\n background: var(--#{$CSS_VAR_PFX}form-element-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}form-element-border-color);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n filter: brightness(100%);\n outline: none !important;\n will-change: filter;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n\n &:hover:not(:focus) {\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n\n &:focus {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__focus) !important;\n }\n\n &::placeholder {\n color: inherit;\n opacity: 0.45;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n }\n\n &:focus::placeholder {\n // hide placeholder on focus\n opacity: 0;\n }\n\n &[class*=\"style-\"] {\n --#{$CSS_VAR_PFX}form-element-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);\n --#{$CSS_VAR_PFX}form-element-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}form-element-border-color: var(--#{$CSS_VAR_PFX}local-border-color);\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(--#{$CSS_VAR_PFX}local-border-color-dark);\n }\n\n .input-wrapper.invalid &,\n &.invalid {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color) !important;\n --#{$CSS_VAR_PFX}form-element-border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__invalid) !important;\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(\n --#{$CSS_VAR_PFX}form-element-border-color__invalid\n ) !important;\n }\n\n &:focus:invalid {\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(\n --#{$CSS_VAR_PFX}form-element-border-color__invalid\n ) !important;\n }\n\n .input-wrapper.warning &,\n &.warning {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color) !important;\n --#{$CSS_VAR_PFX}form-element-border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__warning) !important;\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(\n --#{$CSS_VAR_PFX}form-element-border-color__warning\n ) !important;\n }\n\n .input-wrapper.valid &,\n &.valid {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color) !important;\n --#{$CSS_VAR_PFX}form-element-border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n }\n\n // Just elements with [readonly] attribute instead of CSS [:read-only] that also considers [disabled] elements.\n &[readonly] {\n filter: none !important;\n --#{$CSS_VAR_PFX}form-element-border-color__focus: var(--#{$CSS_VAR_PFX}form-element-border-color) !important;\n }\n\n &.disabled,\n &:disabled {\n pointer-events: none;\n filter: contrast(85%) brightness(85%) opacity(70%) !important;\n }\n}\n\n.checkbox-wrapper,\n.radio-wrapper,\n.toggle-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n margin: 0.75em 0;\n\n &:hover,\n &:focus-within {\n .check {\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n }\n\n &.valid {\n .check {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n }\n }\n &.warning {\n .check {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__warning);\n }\n }\n input:invalid + .check,\n &.invalid .check {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__invalid);\n }\n\n .check {\n position: relative;\n display: inline-block;\n min-width: 1.5em;\n max-width: 1.5em;\n height: 1.5em;\n background: var(--#{$CSS_VAR_PFX}form-element-bg-color);\n border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}form-element-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n\n &.after-label {\n @if $IS_LTR {\n margin-left: 0.5em;\n } @else {\n margin-right: 0.5em;\n }\n }\n\n &:not(.after-label) {\n @if $IS_LTR {\n margin-right: 0.5em;\n } @else {\n margin-left: 0.5em;\n }\n }\n\n &:after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n }\n }\n\n input:not(:disabled) + .check {\n cursor: pointer;\n }\n\n input:disabled + .check {\n pointer-events: none;\n filter: contrast(85%) brightness(85%) opacity(70%) !important;\n\n &:after {\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__invalid);\n }\n }\n\n input {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0 !important;\n }\n}\n\n.radio-button,\n.checkbox-button {\n appearance: none !important;\n width: 0 !important;\n height: 0 !important;\n padding: 0 !important;\n border: none !important;\n opacity: 0 !important;\n}\n","// Input wrapper to add [::before] & [::after] for input styles\n.input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n\n input {\n width: 100%;\n }\n\n &.toggle-password,\n &.invalid,\n &.warning,\n &.valid {\n input {\n @if $IS_LTR {\n padding-right: 3.5em;\n } @else {\n padding-left: 3.5em;\n }\n }\n\n &:after {\n content: \" \";\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n margin: auto 0;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n }\n }\n\n &.invalid {\n &:after {\n @if $IS_LTR {\n right: 1.35em;\n } @else {\n left: 1.35em;\n }\n\n width: 1em;\n height: 0.25em;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__invalid);\n }\n }\n\n &.warning {\n &:after {\n @if $IS_LTR {\n right: 1.55em;\n } @else {\n left: 1.55em;\n }\n\n width: 0.5em;\n height: 0.5em;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__warning);\n }\n\n &:focus-within:after {\n animation: flatify-fade-out 1s infinite;\n }\n }\n\n &.valid {\n &:before {\n content: \" \";\n position: absolute;\n top: 0.45em;\n bottom: 0;\n z-index: 1;\n margin: auto 0;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n // This animation will be played on state change because invalid or warning\n // does not have [::before] so it will get flashed without this animation, that is bad.\n animation: flatify-fade-in 0.35s;\n\n @if $IS_LTR {\n right: 1.75em;\n } @else {\n left: 0.8em;\n }\n\n width: 0.64em;\n height: 0.25em;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n transform: rotate(45deg);\n }\n\n &:after {\n @if $IS_LTR {\n right: 1em;\n } @else {\n left: 1em;\n }\n\n width: 1.2em;\n height: 0.25em;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n transform: rotate(-55deg);\n }\n }\n\n .show-password-button {\n position: absolute;\n top: 0;\n bottom: 0;\n // should be over [.input-wrapper] ::before and ::after\n z-index: 3;\n @if $IS_LTR {\n right: 0.5em;\n } @else {\n left: 0.5em;\n }\n font-size: 1em;\n width: 2.5em;\n height: 2.5em;\n padding: 0.5em;\n margin: auto 0;\n color: var(--#{$CSS_VAR_PFX}form-element-txt-color);\n background: transparent;\n border: none;\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.75);\n\n @media (prefers-reduced-motion: no-preference) {\n &:active,\n &:focus-visible {\n &:before {\n transform: scale(0.85) !important;\n }\n }\n }\n\n &:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: currentColor;\n mask: var(--#{$CSS_VAR_PFX}eye-icon) no-repeat 50% 50%;\n -webkit-mask: var(--#{$CSS_VAR_PFX}eye-icon) no-repeat 50% 50%;\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n }\n\n &:after {\n content: \" \";\n position: absolute;\n @if $IS_LTR {\n right: 0.5em;\n } @else {\n left: 0.5em;\n }\n top: 0;\n bottom: 0;\n z-index: 1;\n width: 1.5em;\n height: 0.18em;\n margin: auto 0;\n background: currentColor;\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n transform: rotate(-30deg);\n clip-path: circle(200% at right);\n transition: all var(--#{$CSS_VAR_PFX}bouncing-transition);\n }\n }\n\n &.visible-password .show-password-button {\n &:after {\n clip-path: circle(0% at right);\n }\n }\n\n // blink eye icon every 7s when password is shown.\n @media (prefers-reduced-motion: no-preference) {\n &.visible-password .show-password-button:not(:active) {\n &:before {\n animation: flatify-eye-blink 7s infinite;\n }\n }\n }\n}\n\ninput:not(.default) {\n @extend %form-element;\n}\n\n// when password is entered give letters more space.\ninput[type=\"password\"]:not(:placeholder-shown) {\n letter-spacing: 0.18em;\n}\n\ninput[type=\"color\"]:not(.default) {\n width: 3.14em;\n height: 2.75em;\n padding: 0.5em;\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.75);\n}\n\ninput[type=\"file\"]:not(.default) {\n filter: brightness(100%);\n\n &::file-selector-button {\n @extend %button;\n cursor: pointer;\n font-size: 0.9em;\n color: inherit;\n background: inherit !important;\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n vertical-align: baseline;\n\n @if $IS_LTR {\n margin: 0 0.75em 0 0;\n } @else {\n margin: 0 0 0 0.75em;\n }\n }\n}\n\n// Buttons with [.button] should not have border\ninput[type=\"submit\"],\ninput[type=\"reset\"],\ninput[type=\"button\"] {\n &.button {\n border: none !important;\n }\n}\n",".checkbox-wrapper {\n input:not(:checked) + .check {\n &:after {\n clip-path: circle(0% at left);\n }\n }\n\n input:checked:not(:indeterminate) + .check {\n &:before {\n content: \" \";\n position: absolute;\n top: 0.7em;\n left: 0.15em;\n z-index: 1;\n width: 0.5em;\n height: 0.22em;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n border-radius: var(--#{$CSS_VAR_PFX}border-radius);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n transform: rotate(45deg);\n animation: flatify-fade-in 0.35s;\n }\n\n &:after {\n top: 0.55em;\n left: 0.3em;\n width: 0.9em;\n height: 0.22em;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n clip-path: circle(200% at bottom);\n transform: rotate(-50deg);\n transition: clip-path linear 0.5s 0.1s;\n }\n }\n\n input:indeterminate + .check {\n &:after {\n background: var(--#{$CSS_VAR_PFX}form-element-accent-color);\n }\n }\n\n input:indeterminate + .check,\n input:disabled:not(:checked) + .check {\n &:after {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 0.75em;\n height: 0.2em;\n margin: auto;\n clip-path: circle(200% at bottom);\n transition: clip-path linear 0.4s 0.1s;\n animation: flatify-grow-x 0.2s both;\n }\n }\n}\n",".radio-wrapper {\n .check {\n &:after {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 0.5em;\n height: 0.5em;\n margin: auto;\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.2);\n }\n }\n\n input:checked + .check {\n &:after {\n background: var(--#{$CSS_VAR_PFX}form-element-border-color__valid);\n animation: flatify-grow 0.25s cubic-bezier(0.85, -0.57, 0.36, 1.72) both;\n }\n }\n}\n","input[type=\"range\"]:not(.default) {\n -webkit-appearance: none;\n width: 100%;\n background: transparent !important;\n border: none;\n filter: none !important;\n\n &::-moz-range-track {\n cursor: pointer;\n width: 100%;\n height: max(3px, calc(var(--#{$CSS_VAR_PFX}border-width) * 1.5));\n background: var(--#{$CSS_VAR_PFX}form-element-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n }\n\n &::-webkit-slider-runnable-track {\n cursor: pointer;\n width: 100%;\n height: max(3px, calc(var(--#{$CSS_VAR_PFX}border-width) * 1.5));\n background: var(--#{$CSS_VAR_PFX}form-element-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n }\n\n &::-moz-range-thumb {\n -webkit-appearance: none;\n cursor: pointer;\n height: 1.24em;\n width: 1.24em;\n background: var(--#{$CSS_VAR_PFX}form-element-bg-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n border: max(1px, var(--#{$CSS_VAR_PFX}border-width)) solid var(--#{$CSS_VAR_PFX}form-element-border-color);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n cursor: pointer;\n height: 1.24em;\n width: 1.24em;\n margin: -0.55em; // webkit thumb should be positioned manually\n background: var(--#{$CSS_VAR_PFX}form-element-bg-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);\n border: max(1px, var(--#{$CSS_VAR_PFX}border-width)) solid var(--#{$CSS_VAR_PFX}form-element-border-color);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n }\n\n &:hover::-moz-range-thumb {\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n\n &:hover::-webkit-slider-thumb {\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n\n @media (prefers-reduced-motion: no-preference) {\n &:active::-moz-range-thumb {\n transform: scale(0.85);\n }\n\n &:active::-webkit-slider-thumb {\n transform: scale(0.85);\n }\n }\n\n &:focus::-moz-range-thumb {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__focus);\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n\n &:focus::-webkit-slider-thumb {\n border-color: var(--#{$CSS_VAR_PFX}form-element-border-color__focus);\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n}\n","select:not(.default) {\n @extend %form-element;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n min-width: 15em;\n max-width: 100%;\n\n @if $IS_LTR {\n padding-right: 2.5em;\n } @else {\n padding-left: 2.5em;\n }\n\n background-image: var(--#{$CSS_VAR_PFX}select-icon);\n background-repeat: no-repeat;\n @if $IS_LTR {\n background-position: right 0.64em center;\n } @else {\n background-position: left 0.64em center;\n }\n\n &[multiple] {\n // hide default scroll when there is no overflow\n overflow-y: auto;\n padding: 1em !important;\n background-image: none !important;\n }\n}\n\nselect option {\n padding: 0.32em;\n color: var(--#{$CSS_VAR_PFX}form-element-txt-color);\n background: var(--#{$CSS_VAR_PFX}form-element-bg-color);\n}\n",".toggle-wrapper {\n &:hover:not(:focus-within) {\n input:not(:disabled) + .check:after {\n @if $IS_LTR {\n transform: translateX(0.3em);\n } @else {\n transform: translateX(-0.3em);\n }\n }\n }\n\n .check {\n // force minimum width for limited space cases\n min-width: 3em;\n width: 3em;\n\n &:after {\n top: 0;\n bottom: 0;\n\n @if $IS_LTR {\n left: 0.18em;\n } @else {\n right: 0.18em;\n }\n\n width: 0.9em;\n height: 0.9em;\n margin: auto 0;\n background: var(--#{$CSS_VAR_PFX}form-element-border-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.3);\n transition: all var(--#{$CSS_VAR_PFX}bouncing-transition);\n }\n }\n\n input:checked + .check {\n &:after {\n @if $IS_LTR {\n transform: translateX(1.4em) !important;\n } @else {\n transform: translateX(-1.4em) !important;\n }\n background: var(--#{$CSS_VAR_PFX}form-element-accent-color);\n }\n }\n\n // To prevent delayed animation it is not available for touch users\n @media (pointer: fine) and (prefers-reduced-motion: no-preference) {\n &:active {\n .check:after {\n transition: all 0.1s 0.05s;\n }\n\n input:disabled {\n &:not(:checked) + .check:after {\n transform: scale(1) !important;\n }\n &:checked + .check:after {\n transform: scale(1) translateX(1.4em) !important;\n }\n }\n\n input:not(:checked) + .check:after {\n transform: scaleX(1.2) scaleY(0.7) !important;\n }\n\n input:checked + .check:after {\n @if $IS_LTR {\n transform: translateX(1.2em) scaleY(0.7) scaleX(1.4) !important;\n } @else {\n transform: translateX(-1.2em) scaleY(0.7) scaleX(1.4) !important;\n }\n }\n }\n }\n}\n","textarea:not(.default) {\n @extend %form-element;\n font-size: 1em;\n // height should not have transition.\n transition: border-color var(--#{$CSS_VAR_PFX}simple-transition), filter var(--#{$CSS_VAR_PFX}simple-transition);\n}\n",":root {\n --#{$CSS_VAR_PFX}item-group-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}item-group-txt-color: var(--#{$CSS_VAR_PFX}txt-color);\n}\n\n.items-group {\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}item-group-txt-color);\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}item-group-bg-color);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n\n .item-button {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n padding: 0.125em 0.5em;\n border: none;\n color: var(--#{$CSS_VAR_PFX}local-txt-color);\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.65);\n transition: all var(--#{$CSS_VAR_PFX}simple-transition);\n\n &:not(:last-child) {\n margin-bottom: 0.5em;\n }\n\n &:focus-visible,\n &:hover {\n filter: brightness(var(--#{$CSS_VAR_PFX}hover-brightness));\n }\n\n &.active {\n color: var(--#{$CSS_VAR_PFX}txt-color-inverted);\n background: var(--#{$CSS_VAR_PFX}color-accent-primary);\n }\n }\n\n .item-icon {\n opacity: 0.75;\n\n @if $IS_LTR {\n margin-right: 0.5em;\n } @else {\n margin-left: 0.5em;\n }\n\n svg {\n width: 3em;\n height: 3em;\n padding: 0.32em;\n\n &:not([fill=\"none\"]) {\n fill: currentColor;\n }\n }\n }\n\n .item-text {\n width: 100%;\n\n @if $IS_LTR {\n text-align: left;\n } @else {\n text-align: right;\n }\n }\n\n .item-title,\n .item-subtitle {\n line-height: 1;\n }\n\n .item-title {\n font-size: 1.125em;\n margin: 0.5em 0;\n\n & + .item-subtitle {\n margin: 0 0 0.64em;\n }\n }\n\n .item-subtitle {\n font-size: 0.9em;\n opacity: 0.65;\n }\n}\n",".no-transition {\n transition-duration: 0s !important;\n}\n\n.no-animation {\n // FlatifyCSS's JS listen to [animationend] event, so [animation: none] will break the functionality.\n animation-duration: 0s !important;\n}\n\n.play-animation:before,\n.play-animation:after,\n.play-animation {\n animation-play-state: running !important;\n}\n\n.pause-animation:before,\n.pause-animation:after,\n.pause-animation {\n animation-play-state: paused !important;\n}\n\n.stop-animation:before,\n.stop-animation:after,\n.stop-animation {\n animation: none !important;\n}\n\n.anim-spin {\n animation: flatify-spin 0.75s linear infinite !important;\n}\n\n.anim-heart {\n animation: flatify-heart 1s ease infinite !important;\n}\n\n.anim-required {\n animation: flatify-heart 1s ease 2 !important;\n}\n\n.anim-pulse {\n animation: flatify-pulse ease 1.5s !important;\n}\n\n.anim-fade-in {\n animation: flatify-fade-in 0.3s ease !important;\n}\n\n.anim-fade-out {\n animation: flatify-fade-out 0.3s ease !important;\n}\n\n.anim-hue {\n animation: flatify-hue 15s ease infinite !important;\n}\n\n.anim-hue-min {\n animation: flatify-hue-min 5s ease infinite !important;\n}\n\n// A simple fade out animation,\n// it is a great choice for reduced-motion situations in [a11y.scss]\n@keyframes flatify-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes flatify-fade-in-out {\n from {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n// Fade in animation for backdrop, it will set the backdrop opacity instead of static value.\n@keyframes flatify-backdrop-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: var(--#{$CSS_VAR_PFX}backdrop-opacity);\n }\n}\n\n// A simple fade out animation,\n// it is a great choice for reduced-motion situations in [a11y.scss]\n@keyframes flatify-fade-out {\n to {\n opacity: 0;\n }\n}\n\n@keyframes flatify-grow {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes flatify-grow-x {\n from {\n transform: scaleX(0);\n }\n to {\n transform: scaleX(1);\n }\n}\n\n@keyframes flatify-grow-y {\n from {\n transform: scaleY(0);\n }\n to {\n transform: scaleY(1);\n }\n}\n\n// Progress bar processing\n@keyframes flatify-processing {\n from {\n opacity: 0.85;\n transform: scaleX(0);\n }\n 100% {\n opacity: 0;\n transform: scaleX(1);\n }\n}\n\n// Blow in & Blow out animation (it will be cool with cubic bezier)\n@keyframes flatify-blow-in {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes flatify-blow-out {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n// Heart animation\n@keyframes flatify-heart {\n 0% {\n transform: scale(1);\n }\n 65% {\n transform: scale(1.05);\n }\n 80% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n// Spin animation\n@keyframes flatify-spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(1turn);\n }\n}\n\n// Slide animations\n@keyframes flatify-slide-up-in {\n from {\n transform: translateY(100%) scale(0.95);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes flatify-slide-up-in-min {\n from {\n opacity: 0;\n transform: translateY(3em) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes flatify-slide-up-out {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%) scale(0.95);\n }\n}\n\n@keyframes flatify-slide-down-in {\n from {\n transform: translateY(-100%) scale(0.95);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes flatify-slide-down-out {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%) scale(0.95);\n }\n}\n@keyframes flatify-slide-down-out-min {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(-3em) scale(0.95);\n }\n}\n\n@keyframes flatify-slide-left-in {\n from {\n transform: translateX(100%) scale(0.95);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes flatify-slide-left-in-min {\n from {\n opacity: 0;\n transform: translateX(3em);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes flatify-slide-left-out {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%) scale(0.95);\n }\n}\n@keyframes flatify-slide-left-out-min {\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(3em);\n }\n}\n\n@keyframes flatify-slide-right-in {\n from {\n transform: translateX(-100%) scale(0.95);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes flatify-slide-right-in-min {\n from {\n opacity: 0;\n transform: translateX(-3em);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@keyframes flatify-slide-right-out {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%) scale(0.95);\n }\n}\n@keyframes flatify-slide-right-out-min {\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(-3em);\n }\n}\n\n// Default animation before removing elements,\n// It can be customized both with [_config.scss] and [--flatify__remove-animation-duration] CSS var.\n\n@keyframes flatify-alert-will-be-removed {\n 85% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n\n @if $IS_LTR {\n transform-origin: top right;\n transform: scale(0.92) rotate(-0.5deg);\n } @else {\n transform-origin: top left;\n transform: scale(0.92) rotate(0.5deg);\n }\n }\n}\n\n// Dropdown show & hide\n@keyframes flatify-dropdown-show {\n from {\n opacity: 0;\n @if $IS_LTR {\n transform: scale(0.9) rotate(3deg);\n } @else {\n transform: scale(0.9) rotate(-3deg);\n }\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes flatify-dropdown-hide {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.85);\n }\n}\n\n// Pulse animation for .pulse\n@keyframes flatify-pulse {\n 0% {\n transform: scale(1);\n }\n 60%,\n 100% {\n opacity: 0;\n transform: scale(1.75);\n }\n}\n\n// animation for eyes blinking\n@keyframes flatify-eye-blink {\n 0% {\n transform: scaleY(1);\n }\n 40% {\n transform: scaleY(1);\n }\n 42% {\n transform: scaleY(0.3);\n }\n 45% {\n transform: scaleY(1);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n\n// hue rotation\n@keyframes flatify-hue {\n 0% {\n filter: hue-rotate(0);\n }\n 40% {\n filter: hue-rotate(360deg);\n }\n 80% {\n filter: hue-rotate(-360deg);\n }\n 100% {\n filter: hue-rotate(0);\n }\n}\n\n@keyframes flatify-hue-min {\n 0% {\n filter: hue-rotate(0);\n }\n\n 40% {\n filter: hue-rotate(45deg);\n }\n 80% {\n filter: hue-rotate(-45deg);\n }\n 100% {\n filter: hue-rotate(0);\n }\n}\n\n// loading dots animation\n@keyframes flatify-loading-dot-first {\n 0% {\n opacity: 0;\n transform: scale(var(--#{$CSS_VAR_PFX}loading-dot-animation-start-scale)) translateX(-0.25em);\n }\n 50% {\n opacity: 1;\n transform: scale(1);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes flatify-loading-dot-second {\n 0%,\n 25% {\n opacity: 0;\n transform: scale(var(--#{$CSS_VAR_PFX}loading-dot-animation-start-scale));\n }\n 65%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes flatify-loading-dot-third {\n 0%,\n 45% {\n opacity: 0;\n transform: scale(var(--#{$CSS_VAR_PFX}loading-dot-animation-start-scale)) translateX(0.25em);\n }\n 85%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n","// .style-[color] is a background, color and border color setter that can be practical for table items and other elements\n@each $name, $colors in $PALETTE {\n // Original version\n .style-#{\"\" + $name} {\n // These are exceptions that should have special text color\n @if $name == yellow or $name == pink {\n color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"darker\"}) !important;\n // Local text color\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"darker\"}) !important;\n } @else if $name == light {\n color: var(--#{$CSS_VAR_PFX}txt-color) !important;\n // Local text color\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color) !important;\n } @else {\n color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;\n // Local text color\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;\n }\n\n background-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"primary\"}) !important;\n // Local background color can be used as background of [:before]\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"primary\"}) !important;\n\n border-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"dark\"}) !important;\n // Local border color can be used as color of box shadow e.g. buttons\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"dark\"}) !important;\n --#{$CSS_VAR_PFX}local-border-color-dark: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"darker\"}) !important;\n }\n\n // Light version\n .style-#{\"\" + $name}-light {\n // These are exceptions that should have special text color\n @if $name == dark {\n color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;\n // Local text color\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;\n } @else if $name == light {\n color: var(--#{$CSS_VAR_PFX}txt-color) !important;\n // Local text color\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color) !important;\n } @else {\n color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"darker\"}) !important;\n // Local text color\n --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"darker\"}) !important;\n }\n\n background-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"light\"}) !important;\n // Local background color can be used as background of [:before]\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"light\"}) !important;\n\n border-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"primary\"}) !important;\n // Local border color can be used as color of box shadow e.g. buttons\n --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"primary\"}) !important;\n --#{$CSS_VAR_PFX}local-border-color-dark: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"dark\"}) !important;\n }\n}\n\n[class*=\"style-\"] {\n // change link text color for color setter classes\n --#{$CSS_VAR_PFX}link-color: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}link-color__hover: var(--#{$CSS_VAR_PFX}local-txt-color);\n --#{$CSS_VAR_PFX}link-color__focus: var(--#{$CSS_VAR_PFX}local-txt-color);\n}\n\n[class*=\"style-\"]:not([class*=\"style-accent\"]) {\n // reset accent color when class is not accent color,\n // for example for style-red accent color should be red.\n --#{$CSS_VAR_PFX}color-accent-light: var(--#{$CSS_VAR_PFX}local-border-color);\n --#{$CSS_VAR_PFX}color-accent-primary: var(--#{$CSS_VAR_PFX}local-border-color-dark);\n --#{$CSS_VAR_PFX}color-accent-dark: var(--#{$CSS_VAR_PFX}local-border-color-dark);\n}\n\n// .color-[color] is a text color setter\n@each $name, $colors in $PALETTE {\n // Original version\n .color-#{\"\" + $name} {\n color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"primary\"}) !important;\n }\n\n // Light version\n .color-#{\"\" + $name}-light {\n color: var(--#{$CSS_VAR_PFX + \"color-\" + $name + \"-\" + \"light\"}) !important;\n }\n}\n","@use \"sass:math\";\n\n@each $name, $value in $RESPONSIVE_BREAKPOINTS {\n // xs and sm are the same\n @if $name != \"xs\" {\n .container-#{$name} {\n max-width: math.floor($value);\n }\n }\n}\n\n[class*=\"container-\"] {\n padding-left: 0.64em;\n padding-right: 0.64em;\n\n @if $CENTERED_CONTAINERS {\n margin-left: auto;\n margin-right: auto;\n }\n}\n","@use \"sass:math\";\n\n// List of opacity helper classes\n@each $value in $OPACITY_LIST {\n // e.g. [.opacity-10]\n .opacity-#{$value} {\n opacity: math.div($value, 100);\n }\n}\n\n// List of border-radius helper classes\n@each $type, $value in $BORDER_RADIUS_LIST {\n .edge-#{$type} {\n border-radius: #{$value} !important;\n }\n}\n\n// List of width helper classes\n@each $type, $value in $WIDTH_LIST {\n .width-#{$type} {\n width: #{$value} !important;\n }\n}\n\n// List of height helper classes\n@each $type, $value in $HEIGHT_LIST {\n .height-#{$type} {\n height: #{$value} !important;\n }\n}\n","// Center align children with flex\n.inline-flex {\n display: inline-flex !important;\n}\n\n.flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.flex-center-x {\n display: flex;\n justify-content: center;\n}\n\n.flex-center-y {\n display: flex;\n align-items: center;\n}\n\n.flex-column-center {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.flex-column-center-x {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.flex-column-center-y {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n// float\n.float-left {\n float: left;\n}\n.float-right {\n float: right;\n}\n.float-none {\n float: none;\n}\n\n// margin\n.margin-auto {\n margin: auto;\n}\n\n.margin-ya {\n margin-top: auto;\n margin-bottom: auto;\n}\n.margin-ta {\n margin-top: auto;\n}\n.margin-ba {\n margin-bottom: auto;\n}\n\n.push-center,\n.margin-xa {\n margin-left: auto;\n margin-right: auto;\n}\n\n.push-right,\n.margin-la {\n margin-left: auto;\n}\n\n.push-left,\n.margin-ra {\n margin-right: auto;\n}\n\n// position\n.position-relative {\n position: relative;\n}\n\n.position-absolute {\n position: absolute;\n}\n\n.place-expand {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.place-expand-x {\n left: 0;\n right: 0;\n}\n\n.place-expand-y {\n top: 0;\n bottom: 0;\n}\n\n.sticky-top,\n.fixed-top,\n.place-top {\n top: 0;\n}\n.sticky-bottom,\n.fixed-bottom,\n.place-bottom {\n bottom: 0;\n}\n.sticky-left,\n.fixed-left,\n.place-left {\n left: 0;\n}\n.sticky-right,\n.fixed-right,\n.place-right {\n right: 0;\n}\n\n.fixed-left,\n.fixed-right,\n.fixed-bottom,\n.fixed-top {\n position: fixed;\n z-index: $ZINDEX_FIXED;\n}\n\n.sticky-left,\n.sticky-right,\n.sticky-bottom,\n.sticky-top {\n position: sticky;\n z-index: $ZINDEX_STICKY;\n}\n\n.fixed-bottom,\n.fixed-top,\n.sticky-bottom,\n.sticky-top {\n left: 0;\n}\n\n// overflow classes\n.scrollable {\n overflow: auto;\n}\n.scrollable-x {\n overflow-x: auto;\n overflow-y: hidden;\n}\n.scrollable-y {\n overflow-x: hidden;\n overflow-y: auto;\n}\n","// overlay layer that hide content\n// class should be added to the wrapper, and wrapper should have [--flatify__local-bg-color] set.\n:root {\n --#{$CSS_VAR_PFX}overlay-layer-priority: 10;\n --#{$CSS_VAR_PFX}overlay-layer-bg-color: var(--#{$CSS_VAR_PFX}bg-color);\n --#{$CSS_VAR_PFX}overlay-layer-opacity: 1;\n --#{$CSS_VAR_PFX}overlay-layer-blending-mode: normal;\n --#{$CSS_VAR_PFX}overlay-layer-backdrop-filter: none;\n}\n\n.overlay-layer {\n --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}overlay-layer-bg-color);\n position: relative;\n\n &:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: var(--#{$CSS_VAR_PFX}overlay-layer-priority);\n width: 100%;\n height: 100%;\n background: var(--#{$CSS_VAR_PFX}local-bg-color);\n border-radius: inherit;\n opacity: var(--#{$CSS_VAR_PFX}overlay-layer-opacity);\n mix-blend-mode: var(--#{$CSS_VAR_PFX}overlay-layer-blending-mode);\n backdrop-filter: var(--#{$CSS_VAR_PFX}overlay-layer-backdrop-filter);\n }\n}\n",".pulse {\n position: relative;\n isolation: isolate;\n\n &:after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n display: block;\n width: 100%;\n height: 100%;\n background: inherit;\n border-radius: inherit;\n will-change: opacity, transform;\n animation: flatify-pulse 1.4s infinite;\n }\n}\n","// though justify is not a good practice for text align, but with it hyphens becomes better.\n.text-filled {\n hyphens: auto;\n text-align: justify;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-right {\n text-align: right;\n}\n\n// text sizes\n@each $size, $value in $FONT_SIZE_LIST {\n .size-#{$size},\n .text-#{$size} {\n font-size: $value !important;\n }\n}\n\n// text truncation\n.truncate {\n &:not(.show-text) {\n white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n }\n &.add-space {\n padding: 0.18em 0;\n }\n}\n","@media (prefers-reduced-motion: reduce) {\n // mentions body for higher priority\n body {\n *,\n ::before,\n ::after {\n background-attachment: initial !important;\n scroll-behavior: auto !important;\n }\n\n // Do not need transition in this case\n * {\n --#{$CSS_VAR_PFX}simple-transition: 0s !important;\n --#{$CSS_VAR_PFX}long-transition: 0s !important;\n --#{$CSS_VAR_PFX}bouncing-transition: 0s !important;\n }\n\n // Fade instead of custom animations\n // Fade In\n .dropdown,\n .modal,\n .tab-panel {\n &.show {\n animation-name: flatify-fade-in !important;\n }\n }\n\n .menu-item {\n &:focus-within > .submenu,\n &:hover > .submenu {\n animation-name: flatify-fade-in !important;\n }\n }\n\n .two-layer-button {\n --#{$CSS_VAR_PFX}two-layer-button-animation-show: flatify-fade-in 0.3s ease-in-out !important;\n }\n\n // accordion fade in/out\n .accordion-collapse {\n transition: none !important;\n\n &.show .accordion-body {\n animation-name: flatify-fade-in !important;\n }\n &.accordion-will-be-hidden .accordion-body {\n animation-name: flatify-fade-out !important;\n }\n }\n\n // toast fade in/out\n .toast {\n &:not(.toast-will-be-removed) {\n animation-name: flatify-fade-in !important;\n }\n &.toast-will-be-removed {\n animation-name: flatify-fade-out !important;\n }\n }\n\n // alert fade in/out\n .alert {\n &:not(.alert-will-be-removed) {\n animation-name: flatify-fade-in !important;\n }\n &.alert-will-be-removed {\n animation-name: flatify-fade-out !important;\n }\n }\n\n // Fade in out like a fresh breath\n .loading {\n animation: flatify-fade-in-out 2s infinite !important;\n\n &:before,\n &:after {\n opacity: 1 !important;\n animation: none !important;\n }\n }\n\n .progress-bar:before {\n filter: opacity(60%);\n animation: flatify-fade-in-out 3s infinite !important;\n }\n\n // Fade Out\n .show {\n &.dropdown-will-be-hidden,\n &.modal-will-be-hidden,\n &.tab-will-be-hidden {\n animation-name: flatify-fade-out !important;\n }\n }\n\n // limit steps for to have a simple animation\n .spinner:before {\n animation-timing-function: steps(4, end) !important;\n animation-duration: 2s !important;\n }\n }\n\n // Custom pulse animation\n @keyframes flatify-pulse {\n 0%,\n 100% {\n transform: scale(1.25);\n opacity: 0.2;\n }\n 40% {\n transform: scale(1.25);\n opacity: 0.5;\n }\n }\n}\n"]}