// ghost buttons
.button {
  @include font-style;
  @include text-ellipsis;
  background: transparent;
  border-radius: $border-radius;
  border: 2px solid currentColor;
  color: returnColorCSSVar('brand-primary');
  cursor: pointer;
  font-family: $font-family-theme;
  height: $baseline * 6;
  line-height: ($baseline * 6) - 4;
  min-width: 120px;
  padding: 0 30px;
  position: relative;
  text-align: center;
  text-decoration: none !important;
  transition: background-color $transition-duration--fast,
    border-color $transition-duration--fast, color $transition-duration--fast;
  vertical-align: middle;

  &:hover,
  &:focus {
    background: $color-brand--one;
    border-color: $color-brand--one;
    color: $color-brand--four;
    text-decoration: none;
    transition: background-color $transition-duration--fast,
      border-color $transition-duration--fast, color $transition-duration--fast;
  }

  &:focus {
    outline: 2px solid currentColor;
    outline-offset: -5px;
    transition: all $transition-duration--fast;
  }

  & {
    @include hover-touch {
      background: returnColorCSSVar('brand-primary-shade-130');
      border-color: returnColorCSSVar('brand-primary-shade-130');
      color: returnColorCSSVar('brand-tertiary');
      outline: none;
    }
  }

  // sizes
  &--s {
    font-size: 16px;
    height: $baseline * 4;
    line-height: ($baseline * 4) - 5; // Should be 35px because visually alignment
    min-width: 50px;
    padding: 0 $baseline;
  }

  // button with icon
  .icon--inline {
    margin-right: $baseline;
    top: 2px;
  }

  .icon svg {
    fill: returnColorCSSVar('brand-primary');
  }

  &:hover,
  &:focus {
    .icon svg {
      fill: returnColorCSSVar('brand-tertiary');
    }
  }

  @include viewport--l {
    // sizes

    &--m {
      //! deprecation notice: --m class no longer needed, button class is sufficient
      height: $baseline * 6;
      line-height: ($baseline * 6) - 4;
      min-width: 120px;
    }

    &--s {
      height: $baseline * 4;
      line-height: ($baseline * 4) - 5; // Should be 35px because visually alignment
      min-width: 80px;

      .icon--inline {
        margin-right: $baseline / 2;
      }
    }

    &:not(.button--full-width) {
      max-width: $button-max-size;
    }
  }
}

button.button--s {
  line-height: ($baseline * 4) - 4;
}

// dark blue
.button--dark-blue {
  @include button--dark;
}

// dark blue 180
.button--dark-blue-180 {
  @include button--dark-blue-180;
}
// off-white
.button--off-white {
  @include button--light;
}

// white
.button--white {
  @include button--white;
}

// blue
.button--blue {
  @include button--blue;
}

// background / color default mappings
// ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
.bg-brand {
  &--blue,
  &--dark-blue {
    .button {
      @include button--white;
    }

    .button--filled {
      background: $color-brand--four;
      color: $color-brand--two;
      border: 2px solid $color-brand--four;

      &:hover {
        background: $color-brand--white;
        color: $color-brand--two;
        border: 2px solid $color-brand--white;
      }
    }
  }

  &--yellow,
  &--turquoise {
    .button {
      @include button--dark;
    }

    .button--filled {
      background: $color-brand--two;
      color: $color-brand--white;
      border: 2px solid $color-brand--two;

      &:hover {
        background: $color--two-80;
        color: $color-brand--white;
        border: 2px solid $color--two-80;
      }
    }

    .modal .button,
    a.modal .button {
      @include button--dark;
    }
  }

  &--off-white {
    .button,
    //poll is exception for modal blue buttons
    .poll .button,
    .poll a.button {
      @include button--dark;
    }

    .button--filled {
      background: $color-brand--two;
      color: $color-brand--white;
      border: 2px solid $color-brand--two;

      &:hover {
        background: $color--two-80;
        color: $color-brand--white;
        border: 2px solid $color--two-80;
      }
    }

    .modal .button,
    a.modal .button,
    &.popover .button {
      @include button--blue;
    }
  }

  &--red {
    .button,
    a.button {
      @include button--dark-blue-180;
    }

    .button--filled {
      background: $color--two-180;
      color: $color-brand--white;

      &:hover {
        background: $color--two-80;
        border-color: $color--two-80;
        color: $color-brand--white;
      }
    }

    .modal .button,
    a.modal .button {
      @include button--dark-blue-180;
    }
  }

  &--blue,
  &--dark-blue,
  &--turquoise,
  &--red,
  &--yellow {
    .popover.bg-brand--off-white .button {
      @include button--blue;

      // override ghost button styling
      &.button--filled {
        background: $color-brand--one;
        border: 2px solid $color-brand--one;
        color: $color-brand--white;

        &:hover {
          background: $color--one-80;
          color: $color-brand--white;
          border: 2px solid $color--one-80;
        }
        // on touch devices hover is similar to ':active' state.
        // outputs regular ':active' state & specific ':hover'
        // state for touch devices
        & {
          @include hover-touch {
            background: $color--one-130;
            color: $color-brand--white;
            border: 2px solid $color--one-130;
          }
        }
        .icon svg {
          fill: $color-brand--white;
        }
      }
    }
  }

  &--blue,
  &--dark-blue,
  &--off-white,
  &--turquoise,
  &--red,
  &--yellow,
  &--white {
    .button--disabled,
    button:disabled {
      &,
      &:hover,
      &:active,
      &:focus {
        background: returnColorCSSVar('gray-20');
        border-color: returnColorCSSVar('gray-20');
        color: returnColorCSSVar('brand-secondary-tint-80');
        pointer-events: none;
      }

      .icon svg {
        fill: returnColorCSSVar('brand-secondary-tint-80');
      }
    }
  }
}

.button {
  @include bg-variants {
    @include button-bg-map;
  }
}