@import "colors";

$default-color: transparent !default;
$dark-gray: #4f4f4f !default;
$navy-blue: #436da7 !default;
$white: white !default;

$btn-colors: (
  border: $dark-gray,
  bg: $default-color,
  font: $dark-gray,
  hover: (
    bg: $dark-gray,
    font: $white
  )
);

.btn {
  display: block;
  min-width: 270px;
  padding: 8px 10px;

  border-radius: 3px;
  border-width: 3px;
  border-style: solid;
  border-color: $default-color;

  background-color: map-get($btn-colors, bg);
}

@mixin btn($colors: $btn-colors) {
  border-color: map-get($colors, border);
  background-color: map-get($colors, bg);

  font-size: 1.05em;
  color: map-get($colors, font);

  &[disabled] {
    opacity: .7;
  }

  &:hover:not([disabled]) {
    $hovers: map-get($colors, hover);
    background-color: map-get($hovers, bg);
    color: map-get($hovers, font);
  }

  @content;
}

@mixin btn-reverse($leading-color: $dark-gray) {
  $colors: (
    border: $leading-color,
    bg: $leading-color,
    font: $white,
    hover: (
      bg: $default-color,
      font: $leading-color
    )
  );
  @include btn($colors);
}

@mixin button($reverse: false, $has-icon: false) {
  @if not $reverse {
    @include btn()
  } @else {
    @include btn-reverse($navy-blue);
  }
  @if $has-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      margin-right: 10px;
      font-size: 1.3em;
    }
  }
  @content;
}

@mixin ghost-button($has-icon: false) {
  @include button($has-icon: $has-icon);

  position: relative;
  font-size: 1.2em;
  border: unset;

  &:hover:not([disabled]) {
    background-color: $default-color;
    color: $dark-gray;

    &::after {
      width: 98%;
    }
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 30%;
    height: 2px;
    background-color: $dark-gray;
    transform: translateY(2px);
    transition: width .3s linear;
  }
}