@import 'settings';

// Button styles
//
// There are different types of buttons that can be used.
// * __Default button:__ Rectangular shaped buttons that is used in most cases.
// Does not lift (on same layer as the parent element) and should be placed cards.
// * __Flat button:__ Are text-only buttons. They should always have a color to
// distinguish them from normal text. They can be used to put less emphasis
// or visual attraction to the action. They may be used in dialogs, toolbars,
// or inline. They do not lift, but fill with color on press.
// * __Raised button:__ Rectangular-shaped buttons that behave like a piece of
// material resting on another sheet – they lift and fill with color on press.
// Raised buttons add dimension to mostly flat layouts. They emphasize functions
// on busy or wide spaces. They may be used inline. They lift and display
// ink reactions on press.
// * __Floating action button:__ A circular button that lifts.
// A floating action button is used for page-wide actions.
// ### Guidelines
//
// In the overview above we have listed many options which
// you can use to style a button. For consistency we recommend the following:
//
// * Start with a default button style and type.
// * Is your button next (left, right, below) to a card? Consider making it a raised button to put it on the same elevation level as the card.
// * Does the button need to be one level higher then card content in terms of elevation?
// Then make it a floating button. This usually means that there is no direct relationship
// with a specific card or section, but the page as a whole. An example for this would be
// to edit a node, where this button to do this is put in a block,
// but you are not only editing the block but the whole node.
// * Only when a button needs more emphasis use the primary style,
// or even the accent style. Per form or set of buttons you only
// want one emphasized button and this should be the preferred action
// in any context.
// * If you want to button to be less visible/prominent you can use a flat button style.
// You can combine this with a smaller size of course. This is mostly used when buttons
// are repeated on a page or you have limited space and other elements need more attention.
// * The succes, warning and danger buttons are inhereted from the bootstrap framework
// and aren't used in the default style. You can use them however if you indicate positive action,
// negative action or caution when interaction with the button.
//
// .btn-primary - Primary style
// .btn-accent - Accent style
// .btn-default - Default style
// .btn-flat - Flat style
//
// Markup: button.twig
//
// Weight: 4
//
// Style guide: atoms.button.style


// Button states
//
// In the examples below you can see how styling is applied when a button
// is active or disabled compared to the default state. For devices that have
// mouse interaction you can hover and find that state as well.
// These aren't available for touch devices of course.
//
// .btn-default - Default state
// .btn-default:hover - Hover state
// .btn-default.active - Active state
// .btn-default.disabled - Disabled state
//
// Markup: button.twig
//
// Style guide: Atoms.button.states
//
// Weight: 7


.btn {
  border-radius: $btn-border-radius-base;

  &.btn-floating {
    border-radius: 50%;
  }

}

.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}

.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

.btn-secondary {
  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}


.btn-accent {
  @include button-variant($btn-accent-color, $btn-accent-bg, $btn-accent-border);
  fill: $btn-accent-color;
}

.btn-flat {
  @include button-variant($brand-primary, transparent, transparent);
  fill: $brand-primary;

  white-space: normal;

  &:hover,
  &:focus,
  .open .dropdown-toggle & {
    //border-color: transparent;
    @include button-variant(inherit, $btn-default-bg, $btn-default-border);
    color: darken($brand-primary, 10%);
    fill: darken($brand-primary, 10%);

    .icon-inline {
      fill: $default-color;
    }
  }

  &:active,
  &.active {
    background-color: rgba(12, 12, 12, 0.25);
    border-color: transparent;
    color: white;
  }

}

.btn-link {
  @include button-variant($brand-primary, transparent, transparent);

  &:hover,
  &:focus {
    color: $link-hover-color;
    fill: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

}

.btn-link[disabled] {
  &:hover,
  &:focus {
    color: $btn-link-disabled-color;
  }
}

.btn--with-bgicon {
  color: #fff;
}

.btn--facebook {
  @include button-variant(#fff, #3b5998, #3b5998);
}

.btn--linkedin {
  @include button-variant(#fff, #0077b5, #0077b5);
}

.btn.btn--google {
  // The Google button styles according to OpenSocial.
  //@include button-variant(#fff, #d34836, #d34836);

  // The Google button styles according to the Google sign-in branding guidelines.
  box-shadow: 0 2px 4px 0 rgba(#000, .25);
  color: rgba(#000, .54);
  background: url('../../components/02-atoms/button/icons/google_signin_buttons/google-sign-in.svg') no-repeat 9px center;

  &:hover,
  &:focus {
    outline: 4px solid rgba(66, 133, 244, .3);
  }

  &:active {
    background-color: #eee;
  }

  &:disabled,
  &[disabled] {
    color: rgba(#000, .4);
    background-color: rgba(#000, .08);
    background-image: url('../../components/02-atoms/button/icons/google_signin_buttons/google-sign-in-disabled.svg');
  }

  &:disabled,
  &[disabled],
  &:active {
    &:hover,
    &:focus {
      outline: none;
    }
  }
}

// Social auth buttons.
.social-auth-buttons {
  > .card__block {
    @include for-phone-only {
      display: flex;
      flex-direction: column;

      .btn {
        order: 1;

        &.btn--google {
          order: 0;
        }
      }
    }
  }
}

.btn--twitter {
  @include button-variant(#fff, #1da1f2, #1da1f2);
}

.btn-sm {
  border-radius: $border-radius-small;
}

.btn-xs {
  border-radius: $border-radius-extrasmall;
}

//
// Social sharing buttons
// --------------------------------------------------
.shariff-button {
  border-radius: $btn-border-radius-base;
}
