//
// Drawing functions
//

// Function to convert px values to em
@function to_em($input, $base: 16px) {
  // multiplied and divided by 1000 to make up for round() shortcoming
  $em_value: ($input / $base) * 1.091 * 1000;
  @return round($em_value) / 1000 * 1em;
}

// Boost the contrast of a color by mixing it with high contrast defined colors
@function hc_color_mix($c, $mc:$hc_mix_color, $mf:$hc_mix_factor) {
  //
  // $c: input color
  // $mc: mix color, defined in High Contrast specific stylesheet
  // $mf: mix factor (%), defined in High Contrast specific stylesheet
  //
  @return st-mix($c, $mc, $mf);
}

// Function to mix the color and make the focus background
@function focus_bg_color($bg, $fc:$accent_color) {
  @return st-mix($fc, $bg, 5%);
}

//
// Drawing mixins
//

// Draw the inset for High Contrast elements
@mixin draw_hc_inset($width: 1px, $ic: $hc_inset_color, $border: false, $no_inset: false) {
  //
  // $width     width of the inset, in pixels
  // $ic        color of the inset
  //
  // $border    if true, use a border instead of a box-shadow to draw inset
  // $no_inset  if true, override the mixin to not draw an iset
  //

  box-shadow: inset 0 0 0 $width $ic;

  // draw inset as border
  @if $border {
    border: $width solid $ic;
    box-shadow: none;
  }

  // don't draw an inset at all
  @if $no_inset {
    box-shadow: none;
    border: none;
  }
}

// Draw the focus ring
@mixin focus_ring($width: 2px, $fc: $accent_color, $border: false) {

  $focus_color: st-transparentize($fc, $focus_border_opacity);

  box-shadow: inset 0 0 0 $width $focus_color !important;
  @if $border {
    border:$width solid $focus_color !important;
    box-shadow: none;
  }
}

// Mixin to convert provided font size in pt to em units
@mixin fontsize($size, $base: 16px, $unit: pt) {
  // if pt, convert into unitless value with the assumption: 1pt = 1.091px
  $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
  $rounded_size: round($adjusted_size / $base) / 1000;
  font-size: $rounded_size * 1em;
  // font-size: round($size) + pt;
}

// Function to fill the background of a panel button
@mixin panel_button_fill($bg) {
  // use a box-shadow to fill the background
  // this is done because panel buttons use a transparent border to fake padding
  box-shadow: inset 0 0 0 100px $bg;
}

// Text entries drawing function
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $style: null, $always_dark: false) {
  //
  // $type:         entry type, possible values: normal, focus, hover, insensitive
  // $c:            text color
  // $bc:           background color
  // $always_dark:  override the light theme check to use dark colors, true or false
  //

  // entry colors
  $entry_fg_color: $c;
  $entry_bg_color: mix($c, $bc, $background_mix_factor);
  $entry_focus_color: $accent_color;

  // entry color overrides for lockscreen style
  @if $style == 'lockscreen' {
    $entry_bg_color: transparentize($c, .9);
    $entry_focus_color: transparentize($entry_fg_color, 0.6);
    @if $contrast == 'high' {
      $entry_focus_color: transparentize($entry_fg_color, 0.3);
    }
  }

  // background color adjustment factors
  // the % a color is lightened or darkened for button states
  $hover_factor: 4%;
  $insensitive_factor: 3%;

  // entry state background colors
  $hover_entry_bg_color: if($variant == 'light', darken($entry_bg_color, $hover_factor), lighten($entry_bg_color, $hover_factor));
  $insensitive_entry_bg_color: if($variant == 'light', lighten($entry_bg_color, $insensitive_factor), darken($entry_bg_color, $insensitive_factor));

  // override entry background colours if element is always dark
  @if $always_dark {
    $hover_entry_bg_color: lighten($entry_bg_color, $hover_factor);
    $insensitive_entry_bg_color: darken($entry_bg_color, $insensitive_factor);
  }

  @if $contrast == 'high' {
    @include draw_hc_inset();
  }

  // normal
  @if $type == 'normal' {
    background-color: $entry_bg_color;
    color: transparentize($c, 0.3);
  }

  // focus styles
  @if $type == 'focus' {
    @include focus_ring($fc:$entry_focus_color);
    background-color: focus_bg_color($entry_bg_color);
    color: $entry_fg_color;

    // lockscreen style
    @if $style == 'lockscreen' {
      @include focus_ring($fc:$entry_focus_color);
      background-color: focus_bg_color($entry_bg_color, $fc:$entry_focus_color);
    }
  }

  // hover styles
  @if $type == 'hover' {
    background-color: $hover_entry_bg_color;
    color: $entry_fg_color;
  }

  // insensitive styles
  @if $type == 'insensitive' {
    background-color: $insensitive_entry_bg_color;
    color: transparentize($entry_fg_color, 0.5);
  }
}


// Button drawing function
@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
  //
  // $type:         button type, possible values:
  //                  - normal, focus, hover, active, checked, insensitive, default, undecorated
  // $c:            button bg color, derived from bg_color
  // $tc:           button text color, derived from fg_color
  // $style:        button style, possible values: card, notification, dialog, flat, default
  // $always_dark:  override the light theme check to use dark colors, true or false
  //

  // mix input colors to get button background color
  $button_bg_color: st-mix($tc, $c, $background_mix_factor);

  // background color override for card elements
  @if $style == 'card' { $button_bg_color: $card_bg_color;}
  // background color mix override for flat style; the button bg color is the background color input
  @if $style == 'flat' { $button_bg_color: $c;}
  // background color mix override for default button style
  @if $style == 'default' { $button_bg_color: $c;}

  // background color adjustment factors
  // the % a color is lightened or darkened for button states
  $hover_factor: 4%;
  $active_factor: 9%;
  $checked_factor: 8%;
  $insensitive_factor: 3%;

  // flat style overrides
  @if $style == 'flat' {
    $hover_factor: 7%; // stronger factor in flat style
  }

  // button base state background colors
  $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
  $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
  $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
  $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));

  // button extended state background colors
  $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
  $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
  $checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor));

  // override button background colours if element is always dark
  @if $always_dark {
    $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
    $active_button_bg_color: st-lighten($button_bg_color, $active_factor);
    $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
    $insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
    // extended
    $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
    $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
    $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
  }

  // background color override for buttons that use transparency
  // styles: dialogs bubbles, lockscreen
  @if $style == 'dialog' or $style == 'lockscreen' {
    $button_bg_color: transparentize($tc, .9);
    $hover_button_bg_color: transparentize($tc, .87);
    $active_button_bg_color: transparentize($tc, .84);
    $active_hover_button_bg_color: transparentize($tc, .81);
  }

  // background color overrides for notification style
  @if $style == 'notification' {
    $button_bg_color: transparentize($tc, .85);
    $hover_button_bg_color: transparentize($tc, .7);
    $insensitive_button_bg_color: transparentize($tc, .9);
    $active_button_bg_color: transparentize($tc, .8);
    $active_hover_button_bg_color: transparentize($tc, .8);
  }

  // flat style overrides
  @if $style == 'flat' {
    $insensitive_button_bg_color: $button_bg_color;
  }

  // high contrast overrides
  @if $contrast == 'high' {
    // override button background colors for high contrast
    $button_bg_color: hc_color_mix($button_bg_color);
    $hover_button_bg_color: hc_color_mix($hover_button_bg_color);
    $active_button_bg_color: hc_color_mix($active_button_bg_color);
    $checked_button_bg_color: hc_color_mix($checked_button_bg_color);

    // also draw the inset border
    @include draw_hc_inset();

    // duplicate flat bg color for High Contrast
    @if $style == 'flat' {
      $button_bg_color: $c;
    }

    @if $style == 'default' {
      @include draw_hc_inset($no_inset: true);
    }
  }

  // normal style
  @if $type == 'normal' {
    color: $tc;
    background-color: $button_bg_color;

    // no inset in High Contrast when the style is flat
    @if $style == 'flat' and $contrast == 'high' {
      @include draw_hc_inset($no_inset: true);
    }
  }

  // hover button
  @else if $type == 'hover' {
    color: $tc;
    background-color: $hover_button_bg_color;
  }

  // active button
  @else if $type == 'active' {
    color: $tc;
    background-color: $active_button_bg_color;
    &:hover { background-color: $active_hover_button_bg_color;}
    &:focus {
      // otherwise use focus bg color mixin
      $bg: focus_bg_color($active_button_bg_color);
      background-color: $bg;
    }
  }

  // checked button
  @else if $type == 'checked' {
    color: $tc;
    background-color: $checked_button_bg_color;
    &:hover { background-color: $checked_hover_button_bg_color;}
    &:active { background-color: $checked_active_button_bg_color;}
  }

  // insensitive button
  @else if $type == 'insensitive' {
    $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
    color: $insensitive_button_fg_color;
    background-color: $insensitive_button_bg_color;

    // no outline in High Contrast for insensitive buttons
    @if $contrast == 'high' {
      @include draw_hc_inset($no_inset: true);
    }
  }

  // focused button
  @else if $type == 'focus' {
    color: $tc;
    @include focus_ring();

    // use a different focus ring color for default style
    @if $style == 'default' {
      @include focus_ring($fc:$accent_borders_color);
    }
    // change background color if style is flat
    @if $style == 'flat' {
      $button_bg_color: transparentize($button_bg_color, 0.75);
    }

    background-color: focus_bg_color($button_bg_color);

    &:hover {
      background-color: focus_bg_color($hover_button_bg_color);
    }
  }

  // reset (unstyled button)
  @else if $type == 'undecorated' {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;

    &:insensitive {
      background-color: transparent !important;
    }
  }
}

// Helper mixin for button-like elements with an icon
@mixin tile_button($fg:$system_fg_color, $bg:$system_bg_color, $raised: false, $system: true) {
  //
  // $fg: foreground color
  // $bg: background color
  //
  // $raised: uses raised style, true or false
  // $system: uses system styles, true or false
  //

  @extend %tile;

  @if $raised {
    @include button(normal, $tc:$fg, $c:$bg, $always_dark: $system);
    &:focus { @include button(focus, $tc:$fg, $c:$bg, $always_dark: $system);}
    &:hover { @include button(hover, $tc:$fg, $c:$bg, $always_dark: $system);}
    &:active { @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);}
    &:highlighted,&:selected,
    &:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);}
    &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
  } @else {
    @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
    // override the mixin to have the flat button always be transparent
    // fixes issue with overlapping tiles
    background-color: transparent;
    &:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
    &:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
    &:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
    &:highlighted,&:selected,
    &:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
    &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
  }

  &:drop {
    background-color: st-transparentize(-st-accent-color, .8);
    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
  }
}

// styling for all menuitems in popovers
@mixin menuitem($bg) {

  // extend common styles
  @extend %menuitem;

  @include button(undecorated, $c:$bg, $style: flat);
  &:active { @include button(active, $c:$bg, $style: flat);}
  &:hover, &:selected, &:checked { @include button(hover, $c:$bg, $style: flat);}
  &:insensitive { @include button(insensitive, $c:$bg, $style: flat);}
}

// Panel menu/button drawing function
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
  //
  // $bg:                 background color, derived from $panel_fg_color
  // $fg:                 foreground color, also derived from $panel_fg_color
  // $style:              can be set to 'filled' if button uses a colored background
  //
  // $highlighted_child:  if true, applies some special overrides for to a
  //                      child element, see _panel.scss for details
  // $child_class:        class name of the child element
  //

  transition-duration: 150ms;
  border: 3px solid transparent;
  background-color: transparent;
  border-radius: $forced_circular_radius;

  font-weight: bold;
  color: $fg;

  // background fill defines
  $fill:              transparent;
  $hover_fill:        transparentize($fg, .83);
  $active_fill:       transparentize($fg, .72);
  $active_hover_fill: transparentize($fg, .68);

  @if $style == 'filled' {
    $fill:              $bg;
    $hover_fill:        if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
    $active_fill:       if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
    $active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
  }

  @include panel_button_fill($fill);

  &:focus, &:hover {
    @include panel_button_fill($hover_fill);
  }

  &:active, &:checked  {
    @include panel_button_fill($active_fill);

    &:hover{
      @include panel_button_fill($active_hover_fill);
    }
  }

  // some overrides to style a child element
  @if $highlighted_child {

    // remove the common styles from the parent
    background: none !important;
    box-shadow: none !important;
    border: none !important;

    // add them to the child
    #{$child_class} {
      transition-duration: 150ms;
      border: 3px solid transparent;
      border-radius: $forced_circular_radius;
    }

    &:focus, &:hover {
      #{$child_class} {
        @include panel_button_fill($hover_fill);
      }
    }

    &:active, &:checked {
      #{$child_class} {
        @include panel_button_fill($active_fill);

        &:hover {
          @include panel_button_fill($active_hover_fill);
        }
      }
    }
  }
}