@import "./button";
@import "./button.ios.vars";


// iOS Button
// --------------------------------------------------

.button-ios {
  @include border-radius($button-ios-border-radius);

  @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);

  @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);

  height: $button-ios-height;

  font-family: $button-ios-font-family;
  font-size: $button-ios-font-size;

  color: $button-ios-text-color;
  background-color: $button-ios-background-color;
}

.button-ios.activated {
  background-color: $button-ios-background-color-activated;
  opacity: $button-ios-opacity-activated;
}

.button-ios.focused {
  background-color: $button-ios-background-color-focused;
}

.enable-hover .button-ios:hover {
  opacity: $button-ios-opacity-hover;
}

a[disabled],
button[disabled],
.button[disabled] {
  opacity: $button-ios-opacity-disabled;
}


// iOS Default Button Color Mixin
// --------------------------------------------------

@mixin ios-button-default($color-name) {
  $bg-color: ion-color($colors-ios, $color-name, base, ios);
  $bg-color-activated: ion-color($colors-ios, $color-name, shade, ios);
  $bg-color-focused: ion-color($colors-ios, $color-name, shade, ios);
  $fg-color: ion-color($colors-ios, $color-name, contrast, ios);

  .button-ios-#{$color-name} {
    color: $fg-color;
    background-color: $bg-color;
  }

  .button-ios-#{$color-name}.activated {
    background-color: $bg-color-activated;
  }

  .button-ios-#{$color-name}.focused {
    background-color: $bg-color-focused;
  }
}


// iOS Button Sizes
// --------------------------------------------------

.button-large-ios {
  @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);

  height: $button-ios-large-height;

  font-size: $button-ios-large-font-size;
}

.button-small-ios {
  @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);

  height: $button-ios-small-height;

  font-size: $button-ios-small-font-size;
}

// iOS Block Button
// --------------------------------------------------

.button-block-ios {
  @include margin-horizontal(0);
}

// iOS Full Button
// --------------------------------------------------

.button-full-ios {
  @include margin-horizontal(0);
  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
}

// iOS Outline Button
// --------------------------------------------------

.button-outline-ios {
  @include border-radius($button-ios-outline-border-radius);

  border-width: $button-ios-outline-border-width;
  border-style: $button-ios-outline-border-style;
  border-color: $button-ios-outline-border-color;
  color: $button-ios-outline-text-color;
  background-color: $button-ios-outline-background-color;
}

.button-outline-ios.activated {
  color: $button-ios-outline-text-color-activated;
  background-color: $button-ios-outline-background-color-activated;
  opacity: $button-ios-outline-opacity-activated;
}

.button-outline-ios.focused {
  background-color: $button-ios-outline-background-color-focused;
}

.button-outline-ios.activated.focused {
  border-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
  background-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
}

// iOS Outline Button Color Mixin
// --------------------------------------------------

@mixin ios-button-outline($color-name) {
  $color-base: ion-color($colors-ios, $color-name, base, ios);
  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
  $color-tint: ion-color($colors-ios, $color-name, shade, ios);
  $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios);

  .button-outline-ios-#{$color-name} {
    border-color: $color-base;
    color: $color-base;
    background-color: $button-ios-outline-background-color;
  }

  .button-outline-ios-#{$color-name}.activated {
    color: $color-contrast;
    background-color: $color-base;
  }

  .button-outline-ios-#{$color-name}.focused {
    background-color: $bg-color-focused;
  }

  .button-outline-ios-#{$color-name}.activated.focused {
    border-color: $color-tint;
    background-color: $color-tint;
  }
}


// iOS Clear Button
// --------------------------------------------------

.button-clear-ios {
  border-color: $button-ios-clear-border-color;
  color: $button-ios-background-color;
  background-color: $button-ios-clear-background-color;
}

.button-clear-ios.activated {
  background-color: $button-ios-clear-background-color-activated;
  opacity: $button-ios-clear-opacity-activated;
}

.button-clear-ios.focused {
  background-color: $button-ios-clear-background-color-focused;
}

.enable-hover .button-clear-ios:hover {
  color: $button-ios-clear-text-color-hover;
  opacity: $button-ios-clear-opacity-hover;
}


// iOS Clear Button Color Mixin
// --------------------------------------------------

@mixin ios-button-clear($color-name) {
  $fg-color: ion-color($colors-ios, $color-name, base, ios);
  $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios);

  .button-clear-ios-#{$color-name} {
    border-color: $button-ios-clear-border-color;
    color: $fg-color;
    background-color: $button-ios-clear-background-color;
  }

  .button-clear-ios-#{$color-name}.activated {
    opacity: $button-ios-clear-opacity-activated;
  }

  .button-clear-ios-#{$color-name}.focused {
    background-color: $bg-color-focused;
  }

  .enable-hover .button-clear-ios-#{$color-name}:hover {
    color: $fg-color;
  }
}


// iOS Round Button
// --------------------------------------------------

.button-round-ios {
  @include border-radius($button-ios-round-border-radius);

  @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start);
}


// Generate iOS Button Colors
// --------------------------------------------------

@each $color-name, $color-value in $colors-ios {
  @include ios-button-default($color-name);
  @include ios-button-outline($color-name);
  @include ios-button-clear($color-name);
}


// iOS strong Button
// --------------------------------------------------

.button-strong-ios {
  font-weight: $button-ios-strong-font-weight;
}
