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

// Material Design Button
// --------------------------------------------------

:host {
  --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
              background-color $button-md-transition-duration $button-md-transition-timing-function,
              color $button-md-transition-duration $button-md-transition-timing-function};
  --border-radius: #{$button-md-border-radius};
  --margin-top: #{$button-md-margin-top};
  --margin-bottom: #{$button-md-margin-bottom};
  --margin-start: #{$button-md-margin-start};
  --margin-end: #{$button-md-margin-end};
  --padding-top: #{$button-md-padding-top};
  --padding-bottom: #{$button-md-padding-bottom};
  --padding-start: #{$button-md-padding-start};
  --padding-end: #{$button-md-padding-end};
  --height: #{$button-md-height};

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

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

  text-transform: #{$button-md-text-transform};
}

// Material Design Solid Button
// --------------------------------------------------

:host(.button-solid) {
  --box-shadow: #{$button-md-box-shadow};
}

:host(.button-solid.activated) {
  --box-shadow: #{$button-md-box-shadow-activated};
  --background: #{current-color(shade)};
}

// Material Design Outline Button
// --------------------------------------------------

:host(.button-outline) {
  --border-width: 1px;
  --border-style: solid;
  --box-shadow: none;
}

:host(.button-outline.activated) {
  --background: transparent;
}

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


// Material Design Clear Button
// --------------------------------------------------

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


// Material Design Round Button
// --------------------------------------------------

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


// Material Design Button Sizes
// --------------------------------------------------

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

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

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

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


// MD strong Button
// --------------------------------------------------

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

::slotted(ion-icon[slot="icon-only"]) {
  @include padding(0);
}