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


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

:host {
  --border-radius: #{$button-ios-border-radius};
  --margin-top: #{$button-ios-margin-top};
  --margin-bottom: #{$button-ios-margin-bottom};
  --margin-start: #{$button-ios-margin-start};
  --margin-end: #{$button-ios-margin-end};
  --padding-top: #{$button-ios-padding-top};
  --padding-bottom: #{$button-ios-padding-bottom};
  --padding-start: #{$button-ios-padding-start};
  --padding-end: #{$button-ios-padding-end};
  --height: #{$button-ios-height};
  --transition: background-color, opacity 100ms linear;

  font-family: #{$button-ios-font-family};
  font-size: #{$button-ios-font-size};
  font-weight: #{$button-ios-font-weight};

  letter-spacing: #{$button-ios-letter-spacing};
}

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

:host(.button-solid:hover) {
  --opacity: #{$button-ios-opacity-hover};
}

:host(.button-solid.focused) {
  --background: #{current-color(shade)};
}

:host(.button-solid.activated) {
  --background: #{current-color(shade)};
  --opacity: #{$button-ios-opacity-activated};
}

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

:host(.button-outline) {
  --border-radius: #{$button-ios-outline-border-radius};
  --border-width: #{$button-ios-outline-border-width};
  --border-style: #{$button-ios-outline-border-style};
}

:host(.button-outline.activated) {
  --background: #{current-color(base)};

  color: #{current-color(contrast)};
}

:host(.button-outline.focused) {
  --background: #{current-color(base, .1)};
}

:host(.button-outline.activated.focused) {
  --border-color: #{current-color(shade)};
  --background: #{current-color(shade)};
}

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

:host(.button-clear:hover) {
  --opacity: #{$button-ios-clear-opacity-hover};
}

:host(.button-clear.activated) {
  --opacity: #{$button-ios-clear-opacity-activated};
}

:host(.button-clear.focused) {
  --background: #{current-color(base, .1)};
}


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

:host(.button-round) {
  --border-radius: #{$button-ios-round-border-radius};
  --padding-top: #{$button-ios-round-padding-top};
  --padding-start: #{$button-ios-round-padding-start};
  --padding-end: #{$button-ios-round-padding-end};
  --padding-bottom: #{$button-ios-round-padding-bottom};
}


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

:host(.button-large) {
  --border-radius: #{$button-ios-large-border-radius};
  --padding-top: #{$button-ios-large-padding-top};
  --padding-start: #{$button-ios-large-padding-start};
  --padding-end: #{$button-ios-large-padding-end};
  --padding-bottom: #{$button-ios-large-padding-bottom};
  --height: #{$button-ios-large-height};

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

:host(.button-small) {
  --border-radius: #{$button-ios-small-border-radius};
  --padding-top: #{$button-ios-small-padding-top};
  --padding-start: #{$button-ios-small-padding-start};
  --padding-end: #{$button-ios-small-padding-end};
  --padding-bottom: #{$button-ios-small-padding-bottom};
  --height: #{$button-ios-small-height};

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


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

:host(.button-strong) {
  font-weight: #{$button-ios-strong-font-weight};
}