/**
 * EdGEL button types
 */

/* Modify the Bootstrap button style */
.btn {
  &:hover,
  &:focus,
  &.focus {
    text-decoration:   underline;
  }
}

/* Disabled button style */
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default.active[disabled],
fieldset[disabled] .btn-default.active {
  background-color: #ddd;
}

/* Button in the current brand colour */
.btn-uoe {
  outline-color:  @brand-bg-text;
  .button-variant(@brand-bg-text; @brand-color; @brand-color);
  margin-bottom:  4px;
  white-space:    @btn-white-space;
  text-align:     initial;
  &.btn-block {
    text-align:   center;
  }
}

.btn-uoe .badge {
  color:          @brand-as-link;
  background:     @brand-bg-text;
  border-color:   @brand-bg-text;
}


/* Outline brand button */
.btn-outline-uoe {
  .button-variant(@brand-as-link; @brand-bg-text; @brand-color);
  &:hover,
  &:active {
    background:   @brand-color;
    color:        @brand-bg-text;
  }
  margin-bottom:  4px;
  white-space:    @btn-white-space;
  text-align:     initial;
  &.btn-block {
    text-align:   center;
  }
}

/* New call-to-action button styles, based on Bootstrap btn-lg */
.btn-lg .glyphicon {
  position:            relative;
  top:                 3px;
  margin-right:        @padding-small-horizontal;
}
/* Don't apply to right margin when not used as a call-to-action */
.input-group-btn .btn-lg .glyphicon {
  margin-right: 0;
}

/* Accessibility contrast improvements for input group buttons in UoE palette colours. */
/* Dotted border for focus added using :before because outline-offset not supported by IE. */
.input-group-btn .btn-page-head,
.input-group-btn .btn-uoe {
  &:focus,
  &:hover {
    background:   @brand-bg-text;
    color:        @brand-color;
    border-color: @brand-color;
  }
  &:focus {
    &:before {
      position:   absolute;
      border:     1px dotted @brand-color;
      content:    '';
      bottom:     5px;
      right:      5px;
      left:       5px;
      top:        5px;
      z-index:    -1;
    }
  }
}

// Remove extra padding if part of dropdown (eg search)
.dropdown .btn {
  margin-bottom: 0;
}

// Legacy CTA call to action buttons, implemented as unordered lists.
// Use .btn.btn-lg.btn-uoe instead.
.cta {
  .clearfix;
  list-style: none;
  padding: 0;
  margin-bottom: @grid-gutter-width;
  li {
    float: left;
    width: 100%;
    a {
      position: relative;
      display: block;
      background: @brand;
      color: @brand-bg-text;
      padding: .px-rem(20px)[] .px-rem(20px)[] .px-rem(20px)[] .px-rem(60px)[];
      margin: 0 .px-rem(5px)[] .px-rem(5px)[] 0;
      font-size: .px-rem(16px)[];
      font-weight: 700;
      .glyphicon {
        opacity: .4;
        font-size: .px-rem(30px)[];
        position: absolute;
        top: .px-rem(16px)[];
        left: .px-rem(18px)[];
      }
    }
    a:hover {
      background: darken(@brand, 5%);
    }
  }
}
.cta.inverted li a {
  .shade;
  background: #fff;
  color: @brand-as-link;
  &:hover {
    background: #fafafa;
  }
  .glyphicon {
    opacity: .2;
    color: @brand-as-link;
  }
}

@media screen and (min-width: @screen-xs-min) {
  .cta li {
    width: 50%;
  }
  // stylelint-disable-next-line selector-class-pattern
  .cta.ctaPairs li {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .cta li {
    width: 33.33%;
  }
  // stylelint-disable-next-line selector-class-pattern
  .cta.ctaPairs li {
    width: 50%;
  }
}
