@import 'settings';

// Button
//
// In addition to the default styling of `<button>` and
// `<input type="submit|image|reset|button">` elements, the `.btn` class and
// its variants can apply buttons styles to various elements (like an `<a>`
// link).
//
// Use logical elements for your buttons. If it is not a link do not use an a
// but a `<button>` tag instead. If the `<a>` elements are used to act as buttons –
// triggering in-page functionality, rather than navigating to another document
// or section within the current page – they should also be given an appropriate `role="button"`.
//
// Style guide: atoms.button

// Button types
//
// 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.
//
// .btn-default - Default button
// .btn-link - Link button
// .btn-default.btn-raised - Raised button
//
// Markup: button.twig
//
// Weight: 3
//
// Style guide: atoms.button.type

// Button sizes
//
// Define a different button size with .btn-lg, .btn-sm, or .btn-xs.
//
// By default use the default size. You can choose to use a large button
// if the action really needs to catch the user`s attention. Combine this
// with a primary or accent style as well to get maximum exposure. Do not mix
// different button sizes in a set of buttons. If the information density in a
// block or section is high and you need to make up space you can choose a
// smaller button size. An example of this are buttons that appear in repetetive blocks.
//
// .btn-primary.btn-xs - Extra ssmall size
// .btn-primary.btn-sm - Small size
// .btn-primary.btn-lg - Large size
// .btn-primary.btn-block - Block level size
//
// Markup: button.twig
//
// Weight: 5
//
// Style guide: atoms.button.sizes

// Floating action button
//
// A circular button that lifts. It is used for page-wide actions.
//
// .btn-default.btn-floating - Floating button
//
// Markup: button--floating.twig
//
// Weight: 6
//
// Style guide: atoms.button.floating

// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

[role="button"] {
  cursor: pointer;
}

// Base styles
// --------------------------------------------------

.btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: $btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style;
  border: 1px solid transparent;
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $button-font-size;
  line-height: $line-height-base;
  user-select: none;
  transition: .3s ease-out;

  &:not(.btn-link) {
    &,
    &:focus,
    &:hover,
    &.focus {
      text-decoration: none;
      outline: 0;
    }

    &.form-group {
      margin-bottom: 0;
    }
  }

  + .btn {
    margin-left: 5px;
  }

  + .btn-block {
    margin-left: 0;
  }

  .caret {
    margin-left: 3px;
  }

  &:active,
  &.active {
    background-image: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;
    opacity: .65;
    box-shadow: none;
  }

  // If a link is inside a button, reset font-weight
  a {
    font-weight: $btn-font-weight;
  }
}

.btn.btn-full {
  display: block;
}

.btn-non-clickable,
a.btn {
  &.disabled,
  fieldset[disabled] & {
    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
  }
}

// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  font-weight: normal;

  &,
  &:active,
  &.active,
  &[disabled],
  &:hover,
  &:focus,
  fieldset[disabled] & {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}

// Social button styles
// --------------------------------------------------
.btn--with-bgicon {
  padding-left: 32px;
  background-size: 16px 16px;
  background-position: 10px 8px;
  background-repeat: no-repeat;
}

.btn--facebook {
  background-image: url('../images/icons/icon-facebook.svg');
}

.btn--linkedin {
  background-image: url('../images/icons/icon-linkedin.svg');
}

.btn--google {
  background-image: url('../images/icons/icon-google.svg');
}

.btn--twitter {
  background-image: url('../images/icons/icon-twitter.svg');
}

.fieldset-wrapper > .btn {
  margin: 5px 5px 5px 0;
}

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

.btn-lg {
  padding: $padding-large-vertical $padding-large-horizontal;
  font-size: $button-font-size-large;
  line-height: $line-height-large;
}

.btn-sm {
  padding: $padding-small-vertical $padding-small-horizontal;
  font-size: $button-font-size-small;
  line-height: $line-height-small;

  .glyphicon:before {
    width: 13px;
    height: 13px;
  }
}

.btn-xs {
  padding: $padding-xs-vertical $padding-xs-horizontal;
  font-size: $button-font-size-extrasmall;
  line-height: $line-height-small;
}

// Block button
// --------------------------------------------------

.btn-block {
  display: block;
  width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: 5px;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

.btn.pull-right + .btn {
  margin-left: 0;
}

// Button raised
// --------------------------------------------------

.btn-raised {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  transition: box-shadow, .15s ease-out;

  &:active,
  &.active,
  &:hover {
    @include z-depth-4;
  }

  &.disabled,
  &[disabled] {
    @include z-depth-2;
  }

}

// Buttons that only have an icon (no text)
// --------------------------------------------------

.btn-icon-toggle {
  background-color: transparent;
  border-radius: 50% !important;
  padding: 4px;

  &:hover,
  &:focus {
    background-color: rgba(0, 0, 0, 0.07);
    border-color: transparent;
  }

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

}

// Icons inside buttons, usually SVG

.btn-icon {
  font-size: $button-font-size * 1.143;
  line-height: 33px - ($padding-base-vertical * 2);
  height: 33px - ($padding-base-vertical * 2);
  width: 33px - ($padding-base-vertical * 2);
  vertical-align: bottom;
}

// @todo see if we can merge this with the options we have above
// Special styles for book pagers
.btn-iconized {
  line-height: 12px;

  .icon-inline {
    fill: inherit;
    width: 24px;
    height: 24px;
    line-height: 24px;
  }

}

// Floating button
// --------------------------------------------------

.btn-floating {
  width: $button-floating-size;
  height: $button-floating-size;
  padding: 7px; //assuming the icon is 24px / medium
  border-radius: $button-floating-radius;
  border: 0;
  @include z-depth-3;

  &:active,
  &.active,
  &:hover {
    @include z-depth-4;
  }

  &.btn-lg {
    width: $button-floating-large-size;
    height: $button-floating-large-size;
  }

  &.disabled,
  &[disabled] {
    @include z-depth-3;
  }

}

//
// Button groups
// --------------------------------------------------

// Make the div behave like a button
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle; // match .btn alignment given font-size hack above
  > .btn {
    position: relative;
    float: left;
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
  }
}

// Prevent double borders when buttons are next to each other
.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: -1px;

    [dir='rtl'] & {
      margin-left: 0;
      margin-right: -1px;
    }
  }
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
  margin-left: -5px; // Offset the first child's margin
  @include clearfix;

  .btn,
  .btn-group,
  .input-group {
    float: left;
  }
  > .btn,
  > .btn-group,
  > .input-group {
    margin-left: 5px;
  }
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
  margin-left: 0;
  &:not(:last-of-type):not(.dropdown-toggle) {
    @include border-right-radius(0);

    [dir='rtl'] & {
      @include border-right-radius(10px);
      @include border-left-radius(0)
    }
  }
}

// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  @include border-left-radius(0);

  [dir='rtl'] & {
    @include border-left-radius(10px);
    @include border-right-radius(0)
  }
}

// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
  float: left;
}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

.btn-group > .btn-group:first-child:not(:last-child) {
  > .btn:last-child,
  > .dropdown-toggle {
    @include border-right-radius(0);
  }
}

.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  @include border-left-radius(0);
}

// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.

.btn-group-xs > .btn {
  @extend .btn-xs;
}

.btn-group-sm > .btn {
  @extend .btn-sm;
}

.btn-group-lg > .btn {
  @extend .btn-lg;
}

// Split button dropdowns
// ----------------------

// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}

.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

.btn-group > .btn-sm + .dropdown-toggle {
  padding-left: 6px;
  padding-right: 6px;
}

.btn-group > .btn-xs + .dropdown-toggle {
  padding-left: 4px;
  padding-right: 4px;
}

// The clickable button for toggling the menu
// Remove the gradient
.btn-group.open .dropdown-toggle {

  // Show no shadow for `.btn-link` since it has no other button styles.
  &.btn-link {
    box-shadow: none;
  }
}

// Carets in other button sizes
.btn-lg .caret {
  border-width: $caret-width-large $caret-width-large 0;
}

// Upside down carets for .dropup
.dropup .btn-lg .caret {
  border-width: 0 $caret-width-large $caret-width-large;
}

// Vertical button groups
// ----------------------

.btn-group-vertical {
  > .btn,
  > .btn-group,
  > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
  }

  // Clear floats so dropdown menus can be properly placed
  > .btn-group {
    @include clearfix;
    > .btn {
      float: none;
    }
  }

  > .btn + .btn,
  > .btn + .btn-group,
  > .btn-group + .btn,
  > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
  }
}

// Operations dropdown buttons

.btn-group--operations {
  width: 100%;
  display: flex;
  justify-content: center;
}

// @TODO: Fix it in future...
// on mobile we want to "add" and "filter" buttons to be on one row
// We need to add these selectors here now, because they need to be loaded regardless of other libraries being loaded
.block-group-add-event-block,
.block-group-add-topic-block,
.block-event-add-block,
.block-topic-add-block,
.block-group-add-block {
  display: inline-block;
  @include for-tablet-landscape-down {
    margin-top: 1rem;
  }

  @include for-tablet-landscape-up {
    display: block;

    .btn {
      width: 100%;
      margin-bottom: 0.75rem;
    }

  }

}

//
// Social sharing buttons
// --------------------------------------------------
.shariff-button {
  // Ensure the icon is always in the middle.
  text-align: center;
}

// Contextual button
.contextual .trigger {
  background-image: url('../../components/06-libraries/icons/source/icon-edit.svg');

  &:focus,
  &:active,
  &:hover {
    background-color: #e6e6e6;
    background-image: url('../../components/06-libraries/icons/source/icon-edit.svg');
  }
}
