// Components :: Buttons :: Styles

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-btn {
  @include fabric-font-size(14px, 40px);

  $defaultColor: fabric-color('medium-grey');
  background-color: $defaultColor;
  border: none;
  color: fabric-choose-contrast-color($defaultColor);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  font-family: 'FS-Emeric-Medium', sans-serif;
  padding: 0 $fabric-global-spacing-unit-small;
  text-decoration: none;
  text-transform: uppercase;
  transition: $fabric-global-transition;

  &:focus {
    outline: none;
  }

  &:disabled {
    background-color: transparent;
    color: $defaultColor;
    border: 1px solid $defaultColor;
    opacity: 0.3;
    pointer-events: none;
  }

  &--outline {
    background-color: transparent;
    border: 1px solid $defaultColor;
    color: $defaultColor;

    .c-btn__icon {
      fill: $defaultColor;
    }
  }

  &--border {
    border: 1px solid transparent;
  }

  &--soft {
    border-radius: $fabric-global-radius;
  }

  &--icon {
    background-color: transparent;
    border: 1px solid transparent;
    display: flex;
    line-height: normal;
    padding: $fabric-global-spacing-unit-small $fabric-global-spacing-unit;

    svg {
      fill: $defaultColor;
    }

    &.c-btn--border {
      border-color: $defaultColor;
    }
  }

  &__icon {
    @include relative(top -1px);

    fill: fabric-choose-contrast-color($defaultColor);
    // margin-right: $fabric-global-spacing-unit-small;
    transition: $fabric-global-transition;
    vertical-align: middle;
    min-width: 44px;

    &--right {
      margin-left: $fabric-global-spacing-unit-small;
      margin-right: 0;
    }
  }
}

.c-btn-group {
  .c-btn--border {
    border-right-width: 0;
  }
  .c-btn--border:last-child {
    border-right-width: 1px;
  }
}

.c-btn-group--rounded {
  .c-btn {
    border-radius: 0;
    &:first-of-type {
      border-top-left-radius: $fabric-global-radius;
      border-bottom-left-radius: $fabric-global-radius;
    }
    &:last-of-type {
      border-top-right-radius: $fabric-global-radius;
      border-bottom-right-radius: $fabric-global-radius;
    }
  }
}

@each $fabric-key, $fabric-value in $fabric-colors {
  .c-btn--#{$fabric-key} {
    background-color: $fabric-value;
    border-color: darken($fabric-value, 25%);
    color: fabric-choose-contrast-color($fabric-value);

    &:hover {
      background-color: darken($fabric-value, 10%);
      color: fabric-choose-contrast-color(darken($fabric-value, 10%));
    }

    &.c-btn--outline {
      background-color: transparent;
      border-color: $fabric-value;
      color: $fabric-value;

      .c-btn--icon {
        fill: $fabric-value;
      }
    }

    &.c-btn--reveals {
      background-color: transparent;
      border-color: transparent;
      color: $fabric-value;

      .c-btn__icon {
        fill: $fabric-value;
      }

      &:hover {
        background-color: $fabric-value;
        color: fabric-choose-contrast-color($fabric-value);

        .c-btn__icon {
          fill: fabric-choose-contrast-color($fabric-value);
        }
      }
    }

    &.c-btn--text {
      background-color: transparent;
      border-bottom: 1px solid transparent;
      border-radius: 0;
      color: $fabric-value;
      line-height: normal;
      padding: 0;

      &:hover {
        border-color: $fabric-value;
      }
    }

    .c-btn__icon {
      fill: fabric-choose-contrast-color($fabric-value);
      transition: $fabric-global-transition;
    }

    // &.c-btn--grouped {
    //   border-color: $fabric-value;
    // }
  }
}

@each $fabric-key, $fabric-value in $fabric-sizes {
  .c-btn--#{$fabric-key} {
    font-size: nth($fabric-value, 2);
    padding: 0 nth($fabric-value, 1);
    @if $fabric-key == 'large' {
      padding: $fabric-global-spacing-unit-small nth($fabric-value, 1);
    }
  }
}