// generic drawing of more complex things

@use "sass:color";
@use "sass:math";
@use "../../theme";
@use "../../theme-color";
@use "../../st-theme";

// provide font size in pt, with px fallback
@function pt($size: st-theme.$font-size) {
  @return ($size * 0.75 / 1px) * 1pt;
}

// provide icon size in em, with px fallback
@function em($size: 16px) {
  @return ($size / st-theme.$font-size) * 1em;
}

// Typography
// based on:
// https://material.io/design/typography/the-type-system.html

@mixin type($style) {
  @if $style == headline1 {
    // font-family: $font-family-large;
    font-size: 96px;
    font-weight: 300;
    // line-height: 1;
  }

  @if $style == headline2 {
    // font-family: $font-family-large;
    font-size: 60px;
    font-weight: 300;
    // line-height: 1;
  }

  @if $style == headline3 {
    // font-family: $font-family-large;
    font-size: 48px;
    font-weight: 400;
    // line-height: 50px;
  }

  @if $style == headline4 {
    // font-family: $font-family-large;
    font-size: 34px;
    font-weight: 400;
    // line-height: 40px;
  }

  @if $style == headline5 {
    font-size: pt(24px);
    font-weight: 400;
    // line-height: 32px;
  }

  @if $style == headline6 {
    font-size: pt(20px);
    font-weight: 500;
    // line-height: 32px;
  }

  @if $style == subtitle1 {
    font-size: pt(st-theme.$font-size-subheading);
    font-weight: 400;
    // line-height: 28px;
  }

  @if $style == subtitle2 {
    font-size: pt(st-theme.$font-size);
    font-weight: 500;
    // line-height: 22px;
  }

  @if $style == body1 {
    font-size: pt(st-theme.$font-size-subheading);
    font-weight: 400;
    // line-height: 24px;
  }

  @if $style == body2 {
    font-size: pt(st-theme.$font-size);
    font-weight: 400;
    // line-height: 20px;
  }

  @if $style == caption {
    font-size: pt(12px);
    font-weight: 400;
    // line-height: 20px;
  }

  @if $style == button {
    font-size: pt(st-theme.$font-size);
    font-weight: 500;
    // line-height: 36px;
  }

  @if $style == overline {
    font-size: pt(12px);
    font-weight: 400;
    // line-height: 32px;
  }
}


@mixin entry($t, $fc: theme-color.$primary) {
//
// entry
//
// $t: entry type
// $fc: focus color
//

  @if $t == normal {
    transition-duration: st-theme.$duration;
    background-color: if($fc == theme-color.$primary, theme-color.entry-fill(theme-color.$on-surface), theme-color.entry-fill(theme-color.$on-dark));
    border-color: transparent;
    box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
  }

  @if $t == focus {
    border-color: transparent;
    box-shadow: inset 0 -2px $fc;
  }

  @if $t == hover {
    box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.$on-surface, $fc);
  }

  @if $t == insensitive {
    color: theme-color.disabled(theme-color.$on-surface);
    border-color: transparent;
    box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.disabled-stroke(theme-color.$on-surface), $fc);
  }
}


@mixin button($t, $c: theme-color.$surface-z8, $tc: theme-color.$on-surface) {
//
// button
//
// $t: button type
// $c: base color
// $tc: text color
//

  @if $t == normal {
    color: $tc;
    background-color: $c;
    border-color: transparent;
    box-shadow: theme.$shadow-z2;
    text-shadow: none;
    icon-shadow: none;
    transition-duration: st-theme.$duration;
  }

  @if $t == focus {
    color: $tc;
    text-shadow: none;
    icon-shadow: none;
    box-shadow: theme.$shadow-z4;
  }

  @if $t == hover {
    color: $tc;
    background-color: $c;
    border-color: transparent;
    box-shadow: theme.$shadow-z4;
    text-shadow: none;
    icon-shadow: none;
  }

  @if $t == active {
    color: $tc;
    background-color: color.mix($tc, $c, math.percentage(0.24));
    border-color: transparent;
    box-shadow: theme.$shadow-z8;
    text-shadow: none;
    icon-shadow: none;
    transition-duration: st-theme.$duration-ripple;
  }

  @if $t == insensitive {
    color: if($tc == theme-color.$on-surface, theme-color.disabled(theme-color.$on-surface), $tc);
    background-color: if($c == theme-color.$surface-z8, theme-color.fill(theme-color.$on-surface), $c);
    border-color: transparent;
    box-shadow: st-theme.$shadow-z0;
    text-shadow: none;
    icon-shadow: none;
  }

  @if $t == flat-normal {
    color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
    background-color: transparent;
    border-color: transparent;
    box-shadow: st-theme.$shadow-z0;
    text-shadow: none;
    icon-shadow: none;
    transition-duration: st-theme.$duration;
  }

  @if $t == flat-focus {
    color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
    background-color: theme-color.focus-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
    text-shadow: none;
    icon-shadow: none;
    box-shadow: st-theme.$shadow-z0;
  }

  @if $t == flat-hover {
    color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
    background-color: theme-color.hover-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
    border-color: transparent;
    box-shadow: st-theme.$shadow-z0;
    text-shadow: none;
    icon-shadow: none;
  }

  @if $t == flat-active {
    color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
    background-color: theme-color.pressed-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
    border-color: transparent;
    box-shadow: st-theme.$shadow-z0;
    text-shadow: none;
    icon-shadow: none;
    transition-duration: st-theme.$duration-ripple;
  }

  @if $t == flat-insensitive {
    color: if($tc != theme-color.$on-dark, theme-color.disabled-hint(theme-color.$on-surface), theme-color.disabled-hint(theme-color.$on-dark));
    background-color: transparent;
    border-color: transparent;
    box-shadow: st-theme.$shadow-z0;
    text-shadow: none;
    icon-shadow: none;
  }
}