@import '../colors';
@import '../mixins';
@import '../fonts/fonts';

// provide font size in rem, with px fallback
@mixin font($font, $size: 24, $base: 16) {
  font-family: $font;
  font-size: round($size) + pt;
}

@mixin button_color($variant) {
  &.red-os-button {
    background-color: bg_red();
  }
  &.orange-os-button {
    background-color: bg_orange();
  }
  &.yellow-os-button {
    background-color: bg_yellow();
  }
  &.lime-os-button {
    background-color: bg_lime();
  }
  &.green-os-button {
    background-color: bg_green();
  }
  &.aqua-os-button {
    background-color: bg_aqua();
  }
  &.blue-os-button {
    background-color: bg_blue();
  }
  &.purple-os-button {
    background-color: bg_purple();
  }
  &.magenta-os-button {
    background-color: bg_magenta();
  }
}

@mixin focus_button_color($variant) {
  &.red-os-button {
    background-color: focus_red();
  }
  &.orange-os-button {
    background-color: focus_orange();
  }
  &.yellow-os-button {
    background-color: focus_yellow();
  }
  &.lime-os-button {
    background-color: focus_lime();
  }
  &.green-os-button {
    background-color: focus_green();
  }
  &.aqua-os-button {
    background-color: focus_aqua();
  }
  &.blue-os-button {
    background-color: focus_blue();
  }
  &.purple-os-button {
    background-color: focus_purple();
  }
  &.magenta-os-button {
    background-color: focus_magenta();
  }
}

@mixin button($t, $variant) {
  @include button_color($variant);

  @if $t== 'normal' {
    //
    // normal button
    //
    @include win98_control_box('classic');
  } @else if $t== 'focus' {
    //
    // focused button
    //
    outline: 1px dotted #000000;
    outline-offset: -4px;
    @include focus_button_color($variant);
  } @else if $t== 'active' {
    //
    // pushed button
    //
    @include win98_control_box_active('classic');
  } @else if $t== 'disabled' {
    //
    // disabled button
    //
    color: disabled($variant);
    text-shadow: 1px 1px 0 white;
  }
}

$font-size: 10;
$font-family: 'w95fa', 'MS Sans Serif', sans, Sans-Serif;

.win98-classic-os-button {
  @include font($font-family, $font-size);

  border: 0;
  background-color: base('classic');

  @include button('normal', 'classic');
  &:not([disabled]):active {
    @include button('active', 'classic');
  }
  &:not([disabled]):focus {
    @include button('focus', 'classic');
  }
  &[disabled] {
    @include button('disabled', 'classic');
  }

  &[os-icon-button] {
    display: flex;
    align-items: center;

    padding: 8px;
    * {
      margin: 0;
    }
  }
}

.win98-vaporwave-os-button {
  @include font($font-family, $font-size);

  border: 0;
  background-color: base('vaporwave');

  @include button('normal', 'vaporwave');
  &:not([disabled]):active {
    @include button('active', 'vaporwave');
  }
  &:not([disabled]):focus {
    @include button('focus', 'vaporwave');
  }
  &[disabled] {
    @include button('disabled', 'vaporwave');
  }

  &[os-icon-button] {
    display: flex;
    align-items: center;

    padding: 8px;
    * {
      margin: 0;
    }
  }
}
