@import 'nav-control-base';

@mixin button {
  @include nav-item(
    $height: $control-height,
    $line-height: $control-line-height,
    $borders:true,
    $selector: button
  );

  font-size: $ec-font-size-action;
  line-height: 1.25rem;
  justify-content: center;
  border: $control-border-width solid transparent;
  border-radius: $control-border-radius;

  .label {
    white-space: nowrap;
    justify-content: center;
  }

  ec-icon {
    color: inherit;
  }

  ec-icon + .label {
    flex: none;
    margin-left: .5rem;
  }
}

@mixin primary-button {
  background-color: $green-3;
  border-color: $green-4;
  color: $ec-color-text-primary-dark;

  &:active:enabled {
    background-color: $green-4;
    color: $ec-color-text-primary-dark;
  }
}

@mixin secondary-button {
  background-color: $ec-color-bg-content;
  border-color: $control-border-color;
  color: $ec-color-text-secondary-dark;

  &:active:enabled {
    background-color: $ec-color-bg-content;
    color: $ec-color-text-primary-dark;
  }
}

@mixin common-button {
  background-color: $blue-3;
  border-color: $blue-4;
  color: $ec-color-text-primary-light;

  &:active:enabled {
    background-color: $blue-4;
    border-color: $blue-6;
  }
}

@mixin danger-button {
  background-color: $ec-color-bg-danger;
  border-color: $red-4;
  color: $ec-color-text-primary-light;

  &:active:enabled {
    background-color: $red-4;
  }
}

@mixin icon-button{
  background-color: transparent;
  color: $ec-color-icon;
  width: $control-height;
  padding: 0;

  ec-icon {
    height: rem-to-em(rem-calc(16px), $nav-font-size);
    margin: 0;
    padding: 0;
  }

  &:hover {
    @include nav-hover('span');
  }

  &:active {
    color: $gray-7;
  }

  &:disabled {
    background-color: transparent;
    border-color: transparent;

    ec-icon {
      opacity: .5;
    }
  }

  &.has-badge {
    width: auto;
    padding-left: rem-calc(6px);
    padding-right: rem-calc(6px);
  }
}

@mixin text-button($color: $ec-color-text-primary-dark) {
  background-color: transparent;
  color: $color;

  &:active:enabled {
    background-color: transparent;
    color: darken($color, 15);
  }

  &:disabled {
    background-color: transparent;
    border-color: transparent;
  }
}
