$button-size-lg: $size-l;
$button-padding-lg: $spacing-s;
$button-size-md: $size-m;
$button-padding-md: $spacing-xs;
$button-size-sm: $size-s;
$button-padding-sm: $spacing-xs;
$button-focus-border-size: $border-m;

$button-primary-color: $color-primary;
$button-primary-color--hover: $color-primary--hover;
$button-primary-color--active: $color-primary--active;
$button-primary-color--focus: $color-primary--lighten;
$button-primary-border-color--focus: $color-primarybuttonfocus;
$button-primary-text-color: $color-primary-text;
$button-secondary-color: $color-controlbase;
$button-secondary-color--hover: $color-controlbase--hover;
$button-secondary-color--active: $color-controlbase--active;
$button-secondary-color--focus: $color-controlbase--lighten;
$button-secondary-border-color--focus: $color-secondarybuttonfocus;
$button-link-secondary-color: $color-controlelement;
$button-link-secondary-color--hover: $color-controlelement--hover;
$button-link-secondary-color--active: $color-controlelement--active;
$button-secondary-text-color: $color-control;

$button-border-radius: $radius-button;

$animation-duration: 200ms;
$animation-function: ease;

mtg-button {
  display: inline-block;
  &.button--fluid {
    display: flex;
    width: 100%;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  @include font-control-button();
  cursor: pointer;
  transition: color $animation-function $animation-duration, background-color $animation-function $animation-duration, border-color $animation-function $animation-duration;
  outline: none;
  white-space: nowrap;

  &.button--fluid {
    display: flex;
    width: 100%;
  }

  &.button--size-lg {
    min-height: $button-size-lg;
    padding: 0 $button-padding-lg;
  }

  &.button--size-md {
    min-height: $button-size-md;
    padding: 0 $button-padding-md;
  }

  &.button--size-sm {
    min-height: $button-size-sm;
    padding: 0 $button-padding-sm;
    @include font-control-smallbutton();
  }

  &.button--variant-button,
  &.button--variant-circle,
  &.button--variant-outline {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: -$button-focus-border-size;
      left: -$button-focus-border-size;
      right: -$button-focus-border-size;
      bottom: -$button-focus-border-size;
      border: $button-focus-border-size solid transparent;
      border-radius: $button-border-radius;
      opacity: 0;
      transition: opacity $animation-function $animation-duration;
    }
    &:focus {
      &:before {
        opacity: 1;
      }
    }

    &.button--color-primary {
      background: $button-primary-color;
      color: $button-primary-text-color;

      &:focus:not(.button--disabled) {
        //background: $button-primary-color--focus;

        &:before {
          border-color: $button-primary-border-color--focus;
        }
      }

      &:hover:not(.button--disabled) {
        background: $button-primary-color--hover;
        border-color: $button-primary-color--hover;
      }

      &:active:not(.button--disabled) {
        background: $button-primary-color--active;
        border-color: $button-primary-color--active;
      }
    }

    &.button--color-secondary {
      background: $button-secondary-color;
      color: $button-secondary-text-color;

      &:focus:not(.button--disabled) {
        //background: $button-secondary-color--focus;

        &:before {
          border-color: $button-secondary-border-color--focus;
        }
      }

      &:hover:not(.button--disabled) {
        background: $button-secondary-color--hover;
        border-color: $button-secondary-color--hover;
      }

      &:active:not(.button--disabled) {
        background: $button-secondary-color--active;
        border-color: $button-secondary-color--active;
      }
    }
    &.button--variant-outline {
      border: 2px solid #fff;
      background: transparent;
    }
  }

  &.button--variant-button,
  &.button--variant-outline {
    border-radius: $button-border-radius;
  }

  &.button--variant-circle {
    border-radius: $radius-button;
    &.button--size-lg {
      width: $size-l;
      padding: 0;
    }
    &.button--size-md {
      width: $size-m;
      padding: 0;
    }
    &.button--size-sm {
      width: $size-s;
      padding: 0;
      .svg-icon {
        width: $size-xs;
        height: $size-xs;
      }
    }
  }

  &.button--variant-link {
    background: transparent;
    &:hover {
      background: transparent;
    }

    &.button--color-primary {
      color: $button-primary-color;
      &:hover:not(.button--disabled) {
        background: transparent;
        color: $button-primary-color--hover;
      }
      &:active:not(.button--disabled) {
        background: transparent;
        color: $button-primary-color--active;
      }
    }

    &.button--color-secondary {
      color: $button-link-secondary-color;
      &:hover:not(.button--disabled) {
        background: transparent;
        color: $button-link-secondary-color--hover;
      }
      &:active:not(.button--disabled) {
        background: transparent;
        color: $button-link-secondary-color--active;
      }
    }
  }

  &.button--dropdown-opened {
    &.button--variant-button {
      &.button--color-primary {
        background: $button-primary-color--active;
      }

      &.button--color-secondary {
        background: $button-secondary-color--active;
      }
    }
    &.button--variant-link {
      &.button--color-primary {
        color: $button-primary-color--active;
      }

      &.button--color-secondary {
        color: $button-link-secondary-color--active;
      }
    }
    .dropdown-selector {
      transform: rotate(-180deg);
    }
  }

  &.button--dropdown {
    .dropdown-selector {
      width: $size-xs;
      height: $size-xs;
      transition: transform ease 300ms;
    }
  }

  &.button--disabled {
    opacity: .16;
    cursor: default;
  }

  mtg-svg-icon {
    width: $size-s;
    height: $size-s;
  }

  .leading-icon {
    margin-right: $spacing-xxxs;
  }

  .trailing-icon {
    margin-left: $spacing-xxxs;
  }

  a {
    color: unset;
    text-decoration: none;
  }
}