$btn-circle-size: toRem(65px);

button, input, optgroup, select, textarea {
  line-height: normal;
}

%btn-circle {
  @include transition(background-color, border, box-shadow, color);

  align-items: center;
  background-color: $purple;
  border-radius: 100%;
  color: white;
  cursor: pointer;
  display: inline-flex;
  height: $btn-circle-size;
  justify-content: center;
  width: $btn-circle-size;

  &:hover {
    background-color: $purple-hover;
  }

  .aph-icon {
    .icon {
      height: toRem(19px);
    }

    path {
      fill: white;
    }
  }
}

%btn {
  @include transition(background-color, border, box-shadow, color);

  background-color: $purple;
  border-radius: $border-radius;
  border: $border-thin;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: toRem(14px);
  height: $button-height;
  outline: none;
  padding: toRem(16px) 0;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;

  &:hover {
    background-color: $purple-hover;
  }

  &.disabled, &:disabled {
    background-color: rgba($purple-hover, 0.5);
    color: white;
    cursor: not-allowed;
    border-color: rgba($purple-hover, 0.1);
  }
}

%btn-outline {
  @extend %btn;
  background-color: transparent;
  color: white;

  &:hover {
    background-color: $purple;
    color: white;

    .fill {
      color: white;
    }
  }

  &.disabled, &:disabled {
    background-color: transparent;
    border-color: white;
    color: white;
    cursor: not-allowed;
  }
}

%btn-square {
  @include transition(background-color, border, box-shadow, color);

  background-color: white;
  border-radius: $border-radius;
  border: none;
  color: $purple;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: ProximaMedium;
  height: toRem(175px);
  outline: none;
  width: toRem(175px);

  .aph-icon {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;

    svg {
      height: toRem(52px);

      &.create {
        height: toRem(50px);
      }
    }

    .fill {
      fill: $dark;
    }
  }

  p {
    font-size: toRem(14px);
    margin: $space 0;
    text-align: center;
  }

  &:hover {
    background-color: $purple;
    color: white;

    .aph-icon {
      .fill {
        fill: white;
      }
    }
  }

  &.disabled, &:disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
}

%btn-footer {
  @include transition(background-color, border, box-shadow, color);

  background-color: $purple;
  border: none;
  color: white;
  cursor: pointer;
  font-family: ProximaMedium;
  font-size: toRem(16px);
  height: $button-height;
  outline: none;
  padding: toRem(16px) 0;
  text-align: center;

  &:hover {
    background-color: $purple-hover;
  }

  &.disabled, &:disabled {
    background-color: $background;
    color: $grey;
    cursor: not-allowed;
  }
}

%btn-footer-light {
  @extend %btn-footer;

  background-color: $background;
  color: $dark;

  &:hover {
    background-color: $background;
  }
}
