@import "button-colors";

// Removed focus outlines, especially in Firefox
@include button-mixin(':focus') {
  outline: 0 !important;
}

// Simple button, with no style
@include button-mixin {
  -moz-transition: all .3s !important;
  -o-transition: all .3s  !important;
  -webkit-transition: all .3s  !important;
  transition: all .3s  !important;
  background-color: transparent;
  border: 2px solid $button-color-simple;
  border-radius: 5px;
  color: $button-color-simple;
  cursor: pointer;
  display: inline-block;
  font-size: $font-size-button;
  line-height: normal !important; // Fix Midori bug
  // Button expands out of boundary bug
  max-width: 98%;
  padding: 8px 10px;
  text-decoration: none;
}

@include button-mixin('.small')  {
  font-size: 1.2rem;
}

@include button-mixin('.medium')  {
  font-size: 1.6rem;
}

@include button-mixin('.large')  {
  font-size: 2.2rem;
}

// Simple button's hover
@include button-mixin(':hover') {
  background-color: $button-color-simple;
  border-color: $button-color-simple;
  color: $meshki-black;
}

// Simple button's active
@include button-mixin(':active') {
  background-color: $button-color-simple-active;
  border-color: $button-color-simple-active;
  color: $meshki-black;
}

// Disabled button
@include button-mixin(':disabled') {
  border-color: $button-color-disabled;
  color: $button-color-disabled;
  pointer-events: none;
}

@include button-mixin('.disabled') {
  border-color: $button-color-disabled;
  color: $button-color-disabled;
  pointer-events: none;
}

@import "button-colors";

.button-couple {
  button:not(:first-child):not(:last-child),
  a:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-style: none;
    display: block;
    margin: -5px auto 5px auto !important;
    pointer-events: none;
  }
}

@media (min-width: $media-tablet) {
  .button-couple {

    button:first-child,
    a:first-child {
      border-bottom-right-radius: 0;
      border-right-style: solid;
      border-top-right-radius: 0;
      margin-right: 0 !important;
      margin-left: 3px;
    }

    button:not(:first-child):not(:last-child),
    a:not(:first-child):not(:last-child) {
      border-bottom-style: solid;
      border-top-style: solid;
      display: inline;
      margin: -5px !important;
    }

    button:last-child,
    a:last-child {
      border-bottom-left-radius: 0;
      border-left-style: solid;
      border-top-left-radius: 0;
      margin: auto 3px auto 0 !important;
    }
  }
}
