/*
 * mixins for setting up buttons
 */

/*
 * create-default-button()
 *
 * Styles a default button.
 */
create-default-button($settings) {
  button {
      padding-top: $settings.style.default.paddingTop;
      padding-bottom: $settings.style.default.paddingBottom;
      padding-left: $settings.style.default.paddingLeft;
      padding-right: $settings.style.default.paddingRight;

      color: $settings.default.color.default;
      background: $settings.default.background.default;
      border: 1px solid $settings.default.color.border;

      font-family: $settings.fontFamily;
      font-size: $settings.defaultFontSize;

      transition: background 200ms ease 0s;

      // NOTE: pseudo class order matters: https://css-tricks.com/remember-selectors-with-love-and-hate/
      &:hover {
        color: $settings.default.color.hover;
        background: $settings.default.background.hover;
        border: 1px solid $settings.default.background.hover;
      }

      &:active {
        outline: none;
        color: $settings.default.color.pressed;
        background: $settings.default.background.pressed;
        border: 1px solid $settings.default.background.pressed;
      }

      &:disabled {
        color: $settings.default.color.disabled;
        background: $settings.default.background.disabled;
        border: 1px solid $settings.default.background.disabled;
        cursor: default;
      }

      &:focus {
        outline: none; // Disable outline in chrome
      }
  }

  button.rs-btn--small {
    padding-top: $settings.style.small.paddingTop;
    padding-bottom: $settings.style.small.paddingBottom;
    padding-left: $settings.style.small.paddingLeft;
    padding-right: $settings.style.small.paddingRight;
  }

  button.rs-btn--selected {
    color: $settings.default.color.hover;
    background: $settings.default.background.hover;
    border: 1px solid $settings.default.background.hover;

    &:hover {
      color: $settings.default.color.pressed;
      background: $settings.default.background.pressed;
      border: 1px solid $settings.default.background.pressed;
    }

    &:active {
      color: $settings.default.color.hover;
      background: $settings.default.background.hover;
      border: 1px solid $settings.default.background.hover;
    }

    &:hover:disabled {
      color: $settings.default.color.hover;
      background: $settings.default.background.hover;
      border: 1px solid $settings.default.background.hover;
      cursor: default;
    }
  }

  /* Styling the base button will is implicitly applying the styles to the 'bem' buttons */
  adjust-p-block-styling($ui-rs-core.types.settings.mobilePortrait, $settings.style);

  +above('tablet') {
    adjust-p-block-styling($ui-rs-core.types.settings.tablet, $settings.style);
  }
}

/*
 * create-bem-button()
 *
 * Creates a button with BEM style classes.
 */
 create-bem-button($name, $settings) {
    .rs-btn--{$name},
    a.rs-btn--{$name} {
      padding-top: $settings.style.default.paddingTop;
      padding-bottom: $settings.style.default.paddingBottom;
      padding-left: $settings.style.default.paddingLeft;
      padding-right: $settings.style.default.paddingRight;

      color: $settings[$name].color.default;
      background: $settings[$name].background.default;

      border: 1px solid $settings[$name].color.border;

      font-family: $settings.fontFamily;
			font-size: $settings.defaultFontSize;

      // NOTE: pseudo class order matters: https://css-tricks.com/remember-selectors-with-love-and-hate/
      &:hover {
        color: $settings[$name].color.hover;
        background: $settings[$name].background.hover;
        border: 1px solid $settings[$name].background.hover;
      }

      &:active {
        outline: none;
        color: $settings[$name].color.pressed;
        background: $settings[$name].background.pressed;
        border: 1px solid $settings[$name].background.pressed;
      }

      &:disabled {
        color: $settings[$name].color.disabled;
        background: $settings[$name].background.disabled;
        border: 1px solid $settings[$name].background.disabled;
        cursor: default;
      }

      &:focus {
        outline: none; // Disable outline in chrome
      }

    }

    a.rs-btn--{$name} {
      box-sizing: border-box;
      text-decoration: none;
    }

    .rs-btn--{$name}.rs-btn--selected {
      color: $settings[$name].color.hover;
      background: $settings[$name].background.hover;
      border: 1px solid $settings[$name].background.hover;

      &:hover {
        color: $settings[$name].color.pressed;
        background: $settings[$name].background.pressed;
        border: 1px solid $settings[$name].background.pressed;
      }

      &:active {
        color: $settings[$name].color.hover;
        background: $settings[$name].background.hover;
        border: 1px solid $settings[$name].background.hover;
      }

      &:hover:disabled {
        color: $settings[$name].color.hover;
        background: $settings[$name].background.hover;
        border: 1px solid $settings[$name].background.hover;
        cursor: default;
      }
    }

    .rs-btn--small,
    a.rs-btn--small {
      padding-top: $settings.style.small.paddingTop;
      padding-bottom: $settings.style.small.paddingBottom;
      padding-left: $settings.style.small.paddingLeft;
      padding-right: $settings.style.small.paddingRight;
    }
 }

/*
 * adjust-p-block-styling()
 *
 * We assume that content within <p> blocks will be text'ish. Therefore we style base component like
 * <buttons> so that they look good in a text flow.
 * The margin is calculated based on the line-height of the <p>: p.line-height - p.font-size - button.padding
 */
adjust-p-block-styling($typeSettings, $styleSettings) {
  $pLineHeight = $typeSettings.p['line-height'];
  $pFontSize = $typeSettings.p['font-size'];

  p button {
    // padding: $styleSettings.default.paddingTop $styleSettings.default.paddingRight $styleSettings.default.paddingBottom $styleSettings.default.paddingLeft;
    margin: ($pLineHeight - $pFontSize);
    line-height: 1;
  }

  p button.rs-btn--small  {
    margin: ($pLineHeight - $pFontSize - $styleSettings.small.paddingTop/2);
  }

  p a.rs-btn--red,
  p a.rs-btn--blue,
  p a.rs-btn--green,
  p a.rs-btn--black {
    margin: ($pLineHeight - $pFontSize);
  }
}