@import 'config';
@import '../variables';
@import '../utilities/mixins';

/// @group mixins
/// @name btn-placeholder
@mixin btn-placeholder {
  @include text-overflow;
  @include btn-by-default;
  max-width: var(--max-column-width);
  text-transform: uppercase;
  height: var(--btn-height);
  text-align: center;
  font-weight: bold;
  font-size: 22px;
}

.#{$framework-prefix}button {
  transition: var(--transition-time);
  background-color: var(--green);
  --btn-height: #{$btn-height};
  @include text-overflow;
  @include btn-by-default;
  @include btn-placeholder;
  color: var(--white);
  border: none;
  &:hover {
    background-color: var(--secondary-color);
  }
  &-secondary {
    transition: var(--transition-time);
    --btn-height: #{$btn-height};
    background-color: var(--white);
    border: 1px solid currentColor;
    color: var(--green);
    @include btn-placeholder;
    @include btn-by-default;
    &:not(:disabled):hover {
      border: 1px solid var(--green);
      background-color: var(--green);
      color: var(--white);
    }
  }
  &-rounded {
    --btn-rounded-bg-dis-color: #{$btn-bg-disabled-color};
    --btn-rounded-height: #{$btn-rounded-height};
    transition: var(--transition-time);
    height: var(--btn-rounded-height);
    background-color: var(--white);
    border: 1px solid currentColor;
    color: var(--green);
    @include btn-by-default;
    @include text-overflow;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 27px;
    text-align: center;
    font-size: 13px;
    &:not(:disabled):hover {
      background-color: var(--green);
      border-color: var(--green);
      color: var(--white);
    }
    &:disabled {
      color: var(--btn-rounded-bg-dis-color);
      border-color: currentColor;
    }
  }
}