@import '../brand.import';
@import '../lib/button.import';
@import '../lib/gradients.import';

setup-buttons($customSettings = {}) {
	/*
   * Default settings:
   */
	$defaultSettings = {
		defaultFontSize: 1rem,
		colourDefault: $ui-rs-core.themes.light.text,
		colourDisabled: #f1f1f1,
    colourDanger: #ed1651,
    colourButton: $brandGrey,
    colourShadow: $brandRed,
		paddingTop: 1.9375em,
		paddingBottom: 1.9375em,
		paddingLeft: 0.75em,
		paddingRight: 0.75em
	}

	$settings = merge($defaultSettings, $customSettings);

  button {
    cursor: pointer;
  }

  create-default-button($settings);
  create-bem-button('red', $settings);
  create-bem-button('green', $settings);
  create-bem-button('blue', $settings);
  create-bem-button('black', $settings);

  // TODO: remove these legacy buttons
  .hero button.danger,
  button.danger {
      color: white;
      background-color: $settings.red.background.hover;
      border: 1px solid $settings.red.background.hover;

      &:hover {
        // background-color: desaturate($settings.red.background.hover, 20%);
        background-color: $settings.red.background.hover;
        border: 1px solid $settings.red.background.hover;
      }

      &:active {
        // background-color: desaturate($settings.red.background.hover, 20%);
        background-color: $settings.red.background.pressed;
        border: 1px solid $settings.red.background.pressed;
      }

      &:disabled {
        background-image: pattern--core();
      }

      &:disabled:hover {
        background-color: $settings.red.background.hover;
        background-image: pattern--core();
        border: 1px solid $settings.red.background.hover;
      }

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

  .hero button {
      color: white;
      font-size: 1.2em;
      background-color: transparent;
      box-shadow: 0 0 0 1px white;

      &:focus {
          outline: none;
          box-shadow: 0 0 0 1px $settings.colourShadow;
      }

      &:hover {
          background-color: rgba(255,255,255,0);
      }

      &:disabled {
          background-image: pattern--core(rgba(255,255,255,0.3));
      }

      &:disabled:hover {
          background-color: transparent;
          background-image: pattern--core(rgba(255,255,255,0.3));
      }

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