/* Corporate Visual Identity */

/* <link rel="stylesheet" href="https://extaas.com/corporate_visual_identity/style.css"> */

@font-face {
  font-family: modern_sans;
  src: url("/ui_resources/font/modern.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: happy_sans;
  src:
    url("/ui_resources/font/happy.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }


:root{
  /* PRAEGU */
  --current: light-dark(#fff, #000);
  --current_40: color-mix(in oklab, var(--current), #0000 40%); /* nähtav  60% */

  /* VASTAND */
  --reverse: light-dark(#000, #fff);
  --reverse_80: color-mix(in oklab, var(--reverse), #0000 80%); /* nähtav 20% */
  --reverse_40: color-mix(in oklab, var(--reverse), #0000 40%); /* nähtav 60% */
  --reverse_20: color-mix(in oklab, var(--reverse), #0000 20%); /* nähtav 80% */

  /* VÄRV*/
  --x_brand: #da3;
  --x_color: var(--color_override, var(--x_brand));
  --x_color_transparent: color-mix(in oklab, var(--x_color), #0000 80%);

  --x_color_000: light-dark(#000, var(--x_color));
  --x_color_transparent_000: light-dark(#00000020, var(--x_color_transparent));

  --x_color_fff: light-dark(#fff, var(--x_color));
  --x_color_transparent_fff: light-dark(#ffffff20, var(--x_color_transparent));
  --x_color_auto: var(--x_color_000);
  --x_color_transparent_auto: var(--x_color_transparent_000);
  
  /* PIND */
  --x_body_background: light-dark(#e0e0e0, #2c2c2c); /* body */
  --x_aside_background: light-dark(#bbb, #222); /* aside */
  --x_outer_background: var(--current_40); /* section, article */
  --x_inner_background: var(--current); /* div, ul */

  /* ÄÄRIS */
  --x_border_color: light-dark(#eee, #222); /* section, div */

  /* TEKST */
  --x_heading_color: var(--reverse); /* header */
  --x_text_color: var(--reverse_40); /* p, i, li, td */
  --x_muted_color: var(--reverse_80); /* span, small*/

  /* NUPPUD */
  --x_primmary_button_text: var(--x_color_000);
  --x_primmary_button_background: var(--x_color_transparent_000);

  --x_secondary_button_text: var(--current);
  --x_secondary_button_background: var(--reverse_20); 
}


/* --- */


html {
  background-color: var(--x_body_background);
  scrollbar-color: #111 black;
  scroll-behavior: smooth; }


body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;}


:is(header, footer).css {
  background: black;
  color-scheme: dark; }


center.css {
  width: min(100% - var(--center_space_override, 2em), var(--center_max_override, 1000px));
  box-sizing: border-box;
  margin-inline: auto; 
  &._800{
    --center_max_override: 800px; }
  &._full {
    --center_space_override: 0; }
  &._left {
    text-align: left !important;}
  &._padding {
    padding: 2em 10px 3em;} }
  


:is(section, aside).css {
  background-color: var(--x_outer_background);
  &._radius {
    border-radius: 5px;}
  &._padding {
    padding: 1em; } }


:is(div, ul).css {
  background-color: var(--inner_bg_override, var(--x_inner_background));
  &._radius {
    border-radius: 3px;}
  &._1 {
    --inner_bg_override: light-dark(#eee, #222); }
  &._2 {
    --inner_bg_override: light-dark(#ccc, #444); } }


/* --- # Popover */

html:has(:popover-open){
  -webkit-tap-highlight-color: transparent;
  &:has([popover="auto"]){
    cursor: url("https://extaas.com/ui_resources/close.png") 2 2, pointer; }
  body {
    background-image: url("https://extaas.com/ui_resources/noise.png") !important;
    background-size: unset !important;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    touch-action: none;
    filter: grayscale(1) opacity(0.3) blur(1em);
    overflow: hidden; } }
    [popover]:popover-open {
      border: 0 solid;
      overflow: hidden auto;
      scrollbar-width: none;
      scrollbar-color: transparent transparent;
      max-height: 100dvh;
      cursor: auto;
      pointer-events: all;
      box-sizing: border-box;
      background: transparent;
      padding: 0;
      position: fixed;
    @media (min-width: 601px) { /* Desktop */
      width: min(calc(100% - 1em), var(--w, 500px)) }
    @media (max-width: 600px) { /* Mobile */
      width: calc(100% - 1em) }
      &::backdrop {
        background: linear-gradient(16deg, #00faff42, #ff00d630) } }
        

/* --- # Text */


:is(h1, h2, h3, h4, a, strong, b):not(.unset) {
  margin: 0;
  color: var(--c_override, var(--reverse)); }


:is(h1, h2, h3, h4):not(.unset) {
  font-family: modern_sans; }


h4:not(.unset) {
  text-transform: uppercase; }


:is(p, i, small, li, td):not(.unset) {
  word-break: break-word;
  color: var(--c_override, var(--x_text_color)) }


span.css {
  color: var(--c_override, var(--current));
  background: var(--bg_override, var(--reverse_80));
  text-decoration: none;
  border-radius: 3px;
  font-size: 12px;
  line-height: 10px;
  padding: 3px 4px;
  white-space: nowrap;
  font-family: monospace;
  height: min-content;
  width: max-content;
  &._black {
    --span_bg_override: #000;
    --c_override: #fff; }
  &._reverse {
    --span_bg_override: var(--x_outer_background);
    --c_override: var(--reverse); } }


._color {
  &:not(:is(._dark, ._light)) {
    --c_override: var(--x_color);
    --bg_override: var(--x_color_transparent); }
  &._dark {
    --c_override: var(--x_color_000);
    --bg_override: var(--x_color_transparent_000); }
  &._light {
    --c_override: var(--x_color_fff);
    --bg_override: var(--x_color_transparent_fff); } }


/* --- # Input */


a:not(.unset){
  text-decoration: none; }


.btn {
  height: min-content;
  white-space: nowrap;
  min-height: var(--btn_height_override, 34px);
  width: var(--btn_width_override, max-content);
  display: inline-grid;
  align-items: var(--btn_vertical_override, center);
  justify-content: var(--btn_horizontal_override, center);
  gap: 8px;
  box-sizing: border-box;
  color: var(--x_btn_color_override, var(--reverse));
  background: var(--x_btn_background_override, var(--reverse_80));
  border: 1px solid var(--x_btn_border_override, transparent);
  border-radius: var(--btn_radius_override, 4px);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  padding: var(--btn_padding_override, 0 12px);
  transition: background .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
  &._transparent {
    --x_btn_color_override: transparent;
    --x_btn_background_override: transparent; }
  &._primary {
    --x_btn_color_override: var(--x_primmary_button_text);
    --x_btn_background_override: var(--x_primmary_button_background); }
  &._secondary {
    --x_btn_color_override: var(--x_secondary_button_text);
    --x_btn_background_override: var(--x_secondary_button_background); }
  &._border {
    --x_btn_border_override: var(--x_btn_color_override); }
  &._padding {
    --btn_padding_override: 5px 10px; }
  &._1 {
    overflow: hidden;
    padding: 0;
    min-width: var(--btn_height_override, 34px);
    aspect-ratio: 1;
    width: min-content;
    svg { width: -webkit-fill-available; } }
    
  &:is(:hover, .active, :focus-visible):not(:disabled) {
    border-color: var(--x_btn_color_override, var(--reverse));
    filter: brightness(1.06); }
  &:disabled {
    cursor: not-allowed;
    filter: grayscale(1) opacity(.45); } }

.btn[href^="https://"]:not([href*="extaas.ee"]):not([href*="extaas.com"]):not(:hover)::after{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent red transparent transparent;
  right: 1px;
  top: 1px;
  position: absolute;
  border-radius: 2px; }

    
/* --- # Build */


.grid {
  display: grid;
  grid-auto-rows: min-content;
  &._start {
    justify-items: start; } }


:is(.flex, .grid)._center {
  align-content: center;
  align-items: center; }


.flex { display: flex;
  &._wrap { flex-wrap: wrap;}
  &._reverse {flex-direction: row-reverse;}
  &._right { justify-content: flex-end; }
  &._down { flex-direction: column; }
  &._space {justify-content: space-between;}
  &._bottom {align-items: flex-end;} }


.gap {
  &:not(._2, ._3, ._5, ._10) {gap: 5px;}
  &._2 {gap: 10px;}
  &._3 {gap: 15px;}
  &._5 {gap: 25px;}
  &._10 {gap: 50px;} }


/* --- # Helper */


[id] { scroll-margin-top: 55px; }

.auto_hide { content-visibility: auto }

.full_width {width: -webkit-fill-available !important;}

.full_text { white-space: nowrap; }

.hide, [type=hidden] { display: none !important }

.dark { color-scheme: dark; }

.light {  color-scheme: light;}

.clean { all: unset; }

@media (max-width: 800px){ .computer { display: none;} }


/* --- # Other */


:is(ul):not(.unset){
  margin: 0; }


hr:not(.unset) {
  &._transparent {
    border-color: transparent; }
  &._x {
    width: -webkit-fill-available; }
  &._y {
    height: -webkit-fill-available; } }


/* --- # Custom */


.blur, [blur] {
  position: relative !important;
  cursor: wait;
  user-select: none;
  pointer-events: none;
  &:not([blur=""])::after {
    position: absolute;
    content: attr(blur);
    width: 90%;
    text-align: center;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'modern_sans';
    font-size: var(--blur_text_size, xx-large);
    text-shadow: 0 0 10px var(--x_color_000); }
  > * {
     animation: blur_bg 2s linear infinite;
     pointer-events: none;} }
@keyframes blur_bg {
  from, to {filter: blur(8px) opacity(.2);}
  50% {filter: blur(5px) opacity(.5);} }



@property --color_override {
  syntax: "<color>";
  inherits: true;
  initial-value: orange; }

html:has(link.rainbow) {
  animation: rainbow 8s linear infinite; }

@keyframes rainbow {
  0%   { --color_override: #ddaa33; }
  20%  { --color_override: #45fe57; }
  40%  { --color_override: #00fffb; }
  60%  { --color_override: #6eadff; }
  80%  { --color_override: #ff6ecf; }
  100% { --color_override: #ddaa33; }
}