// ----------------------------------
// Buttons
// ----------------------------------

@use "sass:math";

.a-btn {
  @extend .a-fontSizeS;
  @include a-fontReg;

  position: relative;
  display: inline-block;
  padding: 6px $spacer * 2 4px $spacer * 2;
  margin-bottom: $spacer;
  color: $black;
  cursor: pointer;
  background: $oldblue;
  border: none;
  border-radius: 0;

  &:hover {
    color: $black;
    text-decoration: none;
    background: $blue-hover-color;
    border: none;
  }

  &:focus {
    color: $black;
    text-decoration: none;
    background: $blue-hover-color;
    border-bottom: none;
    outline: 2px solid $blue-darker;
  }

  &:active,
  &.active {
    color: $black;
    background: $blue;
    background-image: none;
    outline: 0;
  }

  &.disabled,
  &:disabled {
    @include box-shadow( none );

    color: $black;
    cursor: $cursor-disabled;
    background-color: $grey-light;
    box-shadow: 0 0 0 1px $white;
  }

  &::after {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: $spacer * 4;
    // Making the touch target area bigger without affecting the layout
    content: '';
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    min-height: auto;
    content: '';
  }

  // Large btn with border
  &.a-btn-border {
    @extend .a-fontSizeXXL;
    @include a-fontMedium;

    padding: 8px $spacer * 2 4px $spacer * 2;
    color: $blue-darker;
    background: transparent;
    border: 2px solid $blue-darker;

    &:hover,
    &:focus {
      color: $blue-darker;
      background: $blue-darker-opacity;
    }
  }

  // Full width

  &.a-btn--full {
    width: 100%;
    margin-bottom: 0;
    line-height: 36px;
    text-align: center;
  }

  &.a-disabled {
    @extend .a-disabled;
  }
}

.a-btn-negative {
  @include a-fontSize24;
  @include a-fontMedium;
  padding: 8px $spacer * 2 4px $spacer * 2;
  color: $white;
  background: transparent;
  border: 2px solid $blue;

  @include media-breakpoint-up( lg ){
    @include a-fontSize36;
  }

  &:hover,
  &:focus {
    color: $white;
    background: $white-opacity-005;
    border: 2px solid $blue-light;
  }
}

// Large btn with light blue border
.a-btn-lightBorder {
  @include a-fontSize24;
  @include a-fontMedium;
  padding: 8px $spacer * 2 4px $spacer * 2;
  color: $black;
  background: transparent;
  border: 2px solid $blue;

  @include media-breakpoint-up( lg ){
    @include a-fontSize36;
  }

  &:hover,
  &:focus {
    color: $black;
    background: $black-opacity-005;
    border: 2px solid $blue;
  }
}

.a-btn-wide {
  @include a-fontSize36;
  @include a-fontBold;
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 6px $spacer * 2 4px $spacer * 2;
  margin-bottom: $spacer;
  color: $black;
  text-align: center;
  cursor: pointer;
  background: $blue;
  border: none;
  border-radius: 0;

  @include media-breakpoint-up( sm ) {
    @include a-fontSize24;
    width: auto;
  }

  @include media-breakpoint-up( lg ) {
    @include a-fontSize36;
  }

  &:hover {
    color: $black;
    text-decoration: none;
    background: $blue-hover-color;
    border: none;
  }

  &:focus {
    color: $black;
    text-decoration: none;
    background: $blue-hover-color;
    border-bottom: none;
    outline: 0;
  }

  &:active,
  &.active {
    color: $black;
    background: $blue;
    background-image: none;
    outline: 0;
  }

  &.disabled,
  &:disabled {
    @include box-shadow( none );

    color: $black;
    cursor: $cursor-disabled;
    background-color: $grey-light;
    box-shadow: 0 0 0 1px $white;
  }

  &::after {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: $spacer * 4;
    // Making the touch target area bigger without affecting the layout
    content: '';
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    min-height: auto;
    content: '';
  }

  &.a-disabled {
    @extend .a-disabled;
  }

  &.a-btn-border {
    padding: 8px $spacer * 2 4px $spacer * 2;
    color: $blue-darker;
    background: transparent;
    border: 2px solid $blue-darker;

    &:hover,
    &:focus {
      color: $blue-darker;
      background: $blue-darker-opacity;
    }
  }
}

.a-btn-secondary {
  background-color: $white;

  &:hover {
    background: $grey-light;
  }
}

.a-btn-success {
  color: $black;
  background-color: $green;

  &:hover {
    background: $green-hover-color;
    border: none;
  }

  &:active,
  &.active {
    background: $green;
  }

  &:focus {
    background: $green-hover-color;
  }

  &.disabled,
  &:disabled {
    @include box-shadow( none );

    color: $black;
    cursor: $cursor-disabled;
    background-color: $grey-light;
    box-shadow: 0 0 0 1px $white;
  }
}

.a-btn-danger {
  background-color: $red;

  &:hover {
    background: $red-hover-color;
    border: none;
  }

  &:active,
  &.active {
    background: $red-hover-color;
  }

  &:focus {
    background: $red-hover-color;
  }
}



// BTN WITH ICON
.a-btn-icon {
  display: flex;
  width: 100%;
  min-height: $spacer * 5;
  text-align: left;
  background: transparent;

  &:hover,
  &:focus {
    color: $blue;
    background: transparent;
	}

  i {
    align-self: center;
  }

  .a-btn-icon-text {
    text-align: left;
    align-self: center;
  }

  .a-btn-icon-text-ellipsis {
    @include media-breakpoint-up( lg ) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .a-btn-icon-symbol {
    // @include a-fontSize22;
    width: $spacer * 3;
    height: $spacer * 3;
    padding: 0;
    color: $white;
    background: $blue;
    border-radius: 50px;
    justify-content: center;
	}

  &.a-btn-link {
    width: auto;
  }
}

.a-btn-wordwrap {
  display: inline;
  white-space: initial;
}

.a-btn-icon-transparent {
  background: transparent;

  &:hover,
  &:focus {
    color: $blue;
    background: transparent;
	}

  &.a-delete {
    color: $red;

    &:focus {
      border: 1px solid $blue;
    }

  }

}

// BTN WITH WHITE TRANSPARENCY

.a-btn-transparentWhite {
  padding: $spacer;
  background: $white-opacity-05;

  &:hover,
  &:focus {
    color: $black;
    background: $white;
  }

  .a-charIcon {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    color: $blue;
    background: $white;
    border-radius: 48px;

    span {
      @include a-fontSize24;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-top: 11px;
      margin-left: 1px;
      font-style: normal;
      line-height: 28px;
    }

    &:hover,
    &:focus {
      background: $blue;
    }
  }

  .a-btn-icon-symbol {
    // @include a-fontSize18;
    display: inline-flex;
    width: 40px;
    min-height: 40px;
    padding: 0;
    color: $blue;
    background: $white;
    border-radius: 50px;
    justify-content: center;

    &::before {
      align-self: center;
    }

    &.a-button-icon-symbol--secondary {
      background: $transparent;
      border: 2px dotted $blue;
    }

    @include media-breakpoint-up( xs ) {
      line-height: 46px;
    }

    @include media-breakpoint-up( md ) {
      width: $spacer * 4;
      min-height: $spacer * 4;
      line-height: 54px;
    }
  }

  &.a-active,
  &:hover {
    background: $white;

    .a-btn-icon-symbol,
    .a-charIcon {
      color: $white;
      background: $blue;
    }
  }

  .a-btn-icon-text {
    padding-left: $spacer * 0.5;
  }
}


// BTN WITH SHADOW
.a-btn-shadow {
  background: $blue-lighter;
  box-shadow: $shadow;

  .a-shadow & {
    box-shadow: none;
  }

  &:hover,
  &:focus {
    color: $black;
    background: darken( $blue-lighter, 5% );
  }

  &.a-bgGreyLight {
    &:focus,
    &:hover {
      background: darken( $grey-light, 5% );
    }
  }

  .a-dot {
    &::before {
      margin-top: -7px;
    }
  }

  &.a-btn-shadow-large {
    @include a-fontSize16;
    padding-top: $spacer * 1.5 + 1;
    padding-right: $spacer;
    padding-bottom: $spacer * 1.5 - 1;
    padding-left: $spacer;

    @include media-breakpoint-up( md ) {
      padding-right: $spacer * 2;
      padding-left: $spacer * 2;
    }

    .a-login-container & {
      @extend .a-fontSizeM;
    }

    .a-dot {
      position: absolute;
      left: 60px;
    }

    .a-btn-icon-text {
      padding-left: 0;
    }

    .a-btn-icon-text-second {
      display: block;
    }

    i {
      min-width: $spacer * 3;
    }
  }

  .a-label {
    margin-top: -1px;
    margin-left: $spacer;
  }

  &.disabled {
    color: $grey;
    background: $blue-lighter;

    &:hover,
    &:focus {
      color: $grey;
      background: $blue-lighter;
    }
  }
}

.a-offset-border-top {
  position: relative;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    @include media-breakpoint-up( md ) {
      right: $spacer * 2;
      left: $spacer * 2;
    }

    width: auto;
    content: ' ';
    border-top: 1px solid $grey-medium;
  }
}


// Make button look like link
.a-btn-link {
  @extend .a-fontSizeXS;
  @include a-fontReg;
  padding: 0;
  text-align: left;
  background: none;
  border: none;
  box-shadow: none;

  &:active,
  &:focus,
  &:hover {
    border: none;

    span {
      border-bottom: 2px solid $blue-dark;
    }

    &.a-linkDanger {
      border: none;

      span {
        border-bottom: 2px solid darken( $red, 15% );
      }
    }

    &.a-nounderline {
      color: darken($blue-dark, 20%);
      border: none;

      span {
        @include a-fontBold;
        border-bottom: none;
      }
    }
  }

  span {
    padding-bottom: 2px;
    border-bottom: 2px solid $link-color;

    &.a-btn-black-noUnderline {
      @include a-fontBold;
      padding: 0;
      border: none;
    }
  }

  &.a-nounderline {
    color: $blue-dark;
    border: none;

    span {
      @include a-fontBold;
      border-bottom: none;
    }
  }

  &.a-linkDanger {
    span {
      border-bottom: 2px solid $red;
    }
  }

  &.a-accessability-button {
    min-width: 48px !important;
    min-height: 48px !important;
    text-align: center;
    vertical-align: middle;
  }

}

// add btn
.a-btn-action {
  padding: $spacer * 0.5 $spacer * 2 math.div($spacer, 3) $spacer;
  color: $black;
  text-align: left;
  vertical-align: middle;
  background-color: transparent;
  border: 2px dotted $blue;
  align-items: center;

  &.a-iconRight {
    padding: $spacer * 0.5 $spacer math.div($spacer, 3) $spacer;
  }

  &:hover,
  &:focus {
    color: $black;
    background: $blue-lighter;
    border: 2px dotted $blue;
  }

  &:not(.a-fullWidthBtn) {
    span {
      margin-left: $spacer;
    }

    i + span {
      margin-left: 0;
    }
  }
}

@media (max-width: 767px) {
  .navbar-toggleable-sm {
    li {
      .ai-circle-exclamation {
        float: right;
        line-height: 1;
      }
    }
  }
}

// sass-lint:disable-block no-disallowed-properties
@media (min-width: 992px) {
  .a-globalNav {
    li {
      .ai-circle-exclamation {
        font-size: 1.13em !important;
      }
    }
  }
}

// BOX BUTTON
.a-box-button {
  position: relative;
  width: 100%;
  min-height: 190px;
  padding: 15px 4px; // give space to hover border
  cursor: pointer;
  background: $white;
  border: 1px solid $grey-medium;

  &[data-toggle='instant'] {
    i,
    .a-box-button-action {
      color: $grey;
    }
  }

  .a-childBoxButtonList & {
    background-color: $grey-light;
  }

  .a-box-button-text {
    @include media-breakpoint-up( sm ) {
      height: 55px;
      overflow: hidden;
    }
  }

  p {
    margin-bottom: 0;
  }

  .a-box-button-icon {
    display: block;
    width: auto;
    line-height: 1;
  }

  .a-box-button-info {
    @include a-fontSize20;
    @include a-fontBold;

    display: table;
    width: auto;
    padding: 8px $spacer 4px $spacer;
    margin: $spacer auto $spacer auto;
    clear: both;
    font-style: normal;
    color: $black;
    text-align: center;
    background:  $grey-light;
    border-radius: 50px;
  }

  .a-box-button-action {
    @extend .a-fontSizeXXS;
    @include a-fontBold;

    display: inline-block;
  }

  .a-box-button-action-arrow {
    @extend .a-fontSizeXS;
  }

  .a-box-button-secondaryAction {
    display: none;
  }

  &.a-open {
    .a-box-button-primaryAction {
      display: none;
    }

    .a-box-button-secondaryAction {
      display: inline-block;
    }
  }

  @media (max-width: 767px) {
    &.ai-top {
      float: right;
      vertical-align: middle;
    }
  }

  &:hover {
    padding: $spacer 0; // give space to hover border
    background: $white-opacity-05;
    border: 4px solid $blue !important;

    .a-box-button-info {
      background: $white;
    }

    .a-meta-text {
      padding-right: 1px;
      padding-left: 1px;
    }

    .ai-circle-exclamation {
      margin-right: 1px;
    }
  }

  .a-meta-text {
    @extend .a-fontSizeXXXXS;
    display: block;
    min-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .a-box-button-name {
    @extend .a-fontSizeXXS;

    display: block;
    height: 40px;
    overflow-y: hidden;
    text-transform: uppercase;
  }

  &:focus {
    background: $blue-light;
  }
}

// BOX ADD BUTTON
.a-boxAddBtn {
  width: 100%;
  padding: $spacer;
  cursor: pointer;
  background: transparent;
  border: none;

  &:focus,
  &:hover {
    .a-boxAddBtn-inner {
      background: $white-opacity-05;
    }
  }

  .a-boxAddBtn-inner {
    display: block;
    min-height: 168px;
    padding: $spacer * 1.5 $spacer 0 $spacer;
    background-color: transparent;
    border: 2px dotted $blue;

    .a-boxAddBtn-icon {
      @include a-fontSize24;
      display: block;
      padding: $spacer * 2;
    }
  }

  .a-box-button-icon {
    display: block;
    width: auto;
    line-height: 1;
  }
}

// FULL WIDTH ADD BUTTON
.a-fullWidthBtn {
  @include a-fontBold;

  width: 100%;
  min-height: $spacer * 4;

  span {
    display: inline-block;
    width: 70%;
    height: 100%;
    margin-left: $spacer;
    vertical-align: middle;

    @include media-breakpoint-up( sm ) {
      margin-left: $spacer * 2;
    }
  }

  &.a-btnBigger {
    min-height: 77px;
    padding: $spacer;

    i {
      width: 45px;
      height: 45px;
      padding-top: 21px;
      color: $white;
      background: $blue;
      border-radius: 50px;
      justify-content: center;
    }

    span {
      width: 56%;
      margin: 0;
    }
  }
}

.a-bgGrey {
  .a-fullWidthBtn {
    .a-btnBigger {
      &:hover {
        background: $white;
      }
    }
  }
}

.a-btn-icon-inline {
  display: inline !important;
  width: $spacer * 2;
  padding: 0;
}

// SWITCH ACTION (RADIO) BUTTON
.switch-container {
  width: 100%;
  min-height: $spacer * 3;
  border: 2px solid $oldblue;

  .radio {
    position: relative;
    width: 50%;
    height: 100%;

    &:first-of-type {
      float: left;
    }

    &:last-of-type {
      float: right;
    }

    input {
      &[type='radio'] {
        &:checked {
          &:focus {
            &+label {
              background-color: $blue-light;
            }
          }

          &+label {
            background-color: $oldblue;
          }
        }

        &:not(:checked) {
          &:focus {
            &+label {
              background-color: $blue-light;
            }
          }

          &+label {
            &:hover {
              background-color: $blue-light;
            }
          }
        }
      }
    }

    label {
      display: block;
      width: 100%;
      height: 100%;
      padding-top: 1px;
      line-height: $spacer * 3-4px;
      text-align: center;
      cursor: pointer;
      background-color: transparent;
    }

    &.disabled {
      input,
      label {
        cursor: wait;
      }
    }
  }
}

// Buttons groups
.a-btn-group {
  a,
  button {
    margin-right: $spacer;

    &:last-child {
      margin-right: 0;
    }

    &.a-btn-link {
      display: inline-block;
      padding-bottom: 0;
      margin-bottom: $spacer;
    }
  }

  a {
    &:not(.a-btn) {
      display: inline;
      padding-bottom: 2px;
    }
  }

  &.a-btn-group-exLinks {
    a,
    button {
      margin-right: $spacer * 3;
      margin-bottom: $spacer;
    }
  }
}

.a-btn-blue-noUnderline {
  @extend .a-noUnderline;

  color: $blue-dark;

  &:hover,
  &:focus {
    color: darken($blue-dark, 20%);
  }
}

// No style
.a-btn-noStyle {
  padding: 0;
  margin: 0;
  color: $white;
  background: none;
  border: none;
}

.a-link-helpfunction {
  display: flex;
  justify-content: center;

  div {
    text-align: left;

    &.a-link-helpfunction-text {
      margin-left: $spacer;
    }
  }
}

// Button small screen block
.a-btn-md-block {
  @include media-breakpoint-down( md ) {
    display: block;
    margin-bottom: $spacer * 2;
  }
}

.a-btn-lg-block {
  @include media-breakpoint-down( lg ) {
    display: block;
    margin-bottom: $spacer * 2;
  }
}

// Button no text wrap
.a-btn-no-textwrap {
  white-space: nowrap;
}

button {
  &.a-btn-delete {
    z-index: 1;
    display: inline-block;
    min-height: 0;
    padding: 0;
    margin: 0;
  }
}


// Search filter action button
.a-search-filter-action-wrapper {
  div {
    @include media-breakpoint-down( md ) {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 101;
      width: 100%;
      padding: 0;
      margin: 0;

      button {
        width: 100%;
        margin: 0;
      }
    }
  }
}

.a-btn-black-text {
  color: $black !important;
}

.a-accessability-size {
  min-width: 48px !important;
  min-height: 48px !important;
}