@import "../settings/variables";
@import "../tools/arrows";
@import "../tools/buttons";
@import "../tools/forms";
@import "../generic/fonts";

.button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  letter-spacing: $button-letter-spacing;
  outline: none;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;

  &--block {
    justify-content: center;
    width: 100%;

    .button__label:not(.button__label--icon) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &--lg {
    font-size: $button-lg-font-size;
    font-weight: $button-font-weight;
    height: $button-lg-height;
    line-height: $button-lg-line-height;
    padding: $button-lg-padding;

    &.button--icon-only {
      height: $button-lg-height;
      width: $button-lg-height;
    }
  }

  &--md {
    font-size: $button-md-font-size;
    font-weight: $button-font-weight;
    height: $button-md-height;
    line-height: $button-md-line-height;
    padding: $button-md-padding;

    &.button--icon-only {
      height: $button-md-height;
      width: $button-md-height;
    }
  }

  &--sm {
    font-size: $button-sm-font-size;
    font-weight: $button-font-weight;
    height: $button-sm-height;
    line-height: $button-sm-line-height;
    padding: $button-sm-padding;

    &.button--icon-only {
      height: $button-sm-height;
      width: $button-sm-height;
    }
  }

  &--disabled,
  &:disabled {
    cursor: default;
    pointer-events: none;

    &.button--loading {
      .button__label {
        visibility: hidden;
      }
    }
  }

  &--primary {
    @include button-primary($button-primary-fill, $button-primary-hover-fill);
    letter-spacing: $button-primary-letter-spacing;
  }

  &--error-outline {
    @include button-inverted-outline($banner-background-color-error);
  }

  &--success-outline {
    @include button-inverted-outline($banner-background-color-success);
  }

  &--action-outline {
    @include button-inverted-outline($banner-background-color-action);
  }

  &--info-outline {
    @include button-inverted-outline($banner-background-color-info);
  }

  &--secondary {
    @include button(
      $button-secondary-fill,
      $button-secondary-border,
      $button-secondary-color,
      $button-secondary-hover-fill,
      $button-secondary-border,
      $button-secondary-hover-color,
      $button-secondary-fill,
      $button-secondary-disabled-border-color,
      $button-secondary-disabled-color
    );
  }

  &--tertiary {
    @include button-no-outline(
      $button-tertiary-color,
      $button-tertiary-fill,
      $button-tertiary-disabled-color,
      $button-tertiary-hover-border
    );
  }

  &--form {
    @include button-primary($button-form-fill, $button-form-hover-fill);
  }

  &--dropdown {
    @include button(
      $button-dropdown-fill,
      $button-dropdown-border,
      $button-dropdown-color,
      $button-dropdown-hover-fill,
      $button-dropdown-hover-border,
      $button-dropdown-hover-color,
      $button-dropdown-disabled-fill,
      $button-dropdown-disabled-border,
      $button-dropdown-disabled-color
    );

    &.button--loading {
      background-color: $button-dropdown-fill;
      border-color: $button-dropdown-border;
      color: $button-dropdown-color;
    }

    .button__spinner {
      position: static;
    }

    .button__label {
      font-size: 14px;
      letter-spacing: 0.25px;
      overflow-x: hidden;
      text-align: left;
      text-overflow: ellipsis;
      visibility: visible;
      white-space: nowrap;

      &--icon {
        overflow-x: visible;
      }
    }

    &.button--error {
      background-color: $core-red-98;
      border-color: $core-red-50;
    }
  }

  &--dropdown-secondary {
    @include button(
      $button-dropdown-fill,
      transparent,
      $button-dropdown-color,
      $button-dropdown-hover-fill,
      $button-dropdown-hover-border,
      $button-dropdown-hover-color,
      $button-dropdown-disabled-fill,
      $button-dropdown-disabled-border,
      $button-dropdown-disabled-color
    );

    &.button--open {
      border-color: $button-dropdown-hover-border;
    }
  }

  &:not(.button--with-arrow) {
    .button__spinner {
      flex: 0 0 auto;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }

  &--with-arrow {
    justify-content: flex-start;

    .button__label + .button__label {
      text-align: left;
    }

    &::after {
      align-self: center;
      content: "";
      display: inline-flex;
      margin-left: spacing(lg);
      position: relative;
    }

    &.button--primary {
      color: $core-white;

      &::after {
        @include arrow-down(4px, $core-white);
      }
    }

    &.button--dropdown-secondary::after {
      margin-left: spacing(sm);
    }

    &.button--action-outline,
    &.button--error-outline,
    &.button--info-outline,
    &.button--success-outline {
      &::after {
        @include arrow-down(4px, $core-black);
      }

      &:hover,
      &--hover {
        &::after {
          @include arrow-down(4px, $core-white);
        }
      }

      &:disabled,
      &.button--disabled {
        &::after {
          @include arrow-down(4px, $core-gray-70);
        }
      }
    }

    &.button--dropdown,
    &.button--dropdown-secondary {
      padding: 0 spacing(md);
      max-width: $button-dropdown-width;

      &.button--block {
        min-width: 100%;
      }

      &::after {
        @include arrow-down(4px, $button-dropdown-arrow);
      }

      &:disabled,
      &.button--disabled {
        &::after {
          @include arrow-down(4px, $core-gray-70);
        }
      }
    }

    &.button--open {
      &:after {
        border-top: none;
      }

      &.button--primary {
        &::after {
          @include arrow-up(4px, $core-white);
        }
      }

      &.button--dropdown,
      &.button--dropdown-secondary {
        &::after {
          @include arrow-up(4px, $button-dropdown-arrow);
        }
      }

      &.button--action-outline,
      &.button--error-outline,
      &.button--info-outline,
      &.button--success-outline {
        &::after {
          @include arrow-up(4px, $core-black);
        }

        &:hover,
        &--hover {
          &::after {
            @include arrow-up(4px, $core-white);
          }
        }

        &:disabled,
        &.button--disabled {
          &::after {
            @include arrow-up(4px, $core-gray-70);
          }
        }
      }
    }

    &--disabled,
    &:disabled {
      &.button--loading {
        &::after {
          display: none;
        }

        .button__spinner {
          position: static;
          margin-left: spacing(md);
        }

        .button__label {
          visibility: visible;
        }
      }
    }
  }

  &--icon-only {
    align-items: center;
    // TODO BREAKING display: inline-flex (same as parent)
    display: flex;
    height: $button-md-height;
    justify-content: center;
    padding: 0;
    width: $button-md-height;

    .button__label--icon {
      overflow-x: visible;
      text-align: center;
      width: inherit;
    }

    &.button--dropdown {
      border-color: transparent;
      color: $core-gray-45;

      &--disabled,
      &:disabled {
        color: $button-dropdown-disabled-color;
      }

      &:hover,
      &--hover {
        color: $core-gray-15;
      }
    }
  }

  &__label {
    flex-grow: 1;
    position: relative;
    margin-left: spacing(sm);

    &--icon {
      line-height: 0;
      flex-grow: 0;
    }

    &:first-child {
      margin-left: 0;
    }
  }

  &__spinner {
    flex: 0 0 auto;
    display: none;
    line-height: 0;
    justify-content: center;
    align-items: center;
  }

  &--loading {
    .button__spinner {
      display: flex;
    }
  }

  &.button--focus,
  &.button:focus {
    @include focus();
  }
}