@import '../../../constants/theme.scss';
@import '../../../utils/mixins.scss';

.buttonBase {
  background-color: transparent;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border-style: double;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    cursor: auto;
    filter: brightness(80%);
  }
}

.button {
  composes: buttonBase;
  @include theme(color, contrast1);
  @include theme(border, contrast1, 1px solid);

  &:hover {
    @include theme(background-color, contrast1);
    @include theme(color, accent1);
  }

  &:disabled {
    @include theme(color, contrast1);
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}

.buttonWhite {
  composes: buttonBase;
  border-color: $white;
  color: $white;

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

  &:disabled {
    color: $white;
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}

.buttonBlack {
  composes: buttonBase;
  border-color: $black;
  color: $black;

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

  &:disabled {
    color: $black;
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}

.buttonBlue {
  composes: buttonBase;
  @include theme(color, blue1);
  @include theme(border, blue1, 1px solid);

  &:hover {
    @include theme(background-color, blue1);
    @include theme(color, accent1);
  }

  &:disabled {
    @include theme(color, blue1);
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}

.buttonRed {
  composes: buttonBase;
  @include theme(color, red1);
  @include theme(border, red1, 1px solid);

  &:hover {
    @include theme(background-color, red1);
    @include theme(color, accent1);
  }

  &:disabled {
    @include theme(color, red1);
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}

.buttonGreen {
  composes: buttonBase;
  @include theme(color, green1);
  @include theme(border, green1, 1px solid);

  &:hover {
    @include theme(background-color, green1);
    @include theme(color, accent1);
  }

  &:disabled {
    @include theme(color, green1);
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}

.buttonYellow {
  composes: buttonBase;
  @include theme(color, yellow1);
  @include theme(border, yellow1, 1px solid);

  &:hover {
    @include theme(background-color, yellow1);
    @include theme(color, accent1);
  }

  &:disabled {
    @include theme(color, yellow1);
    filter: saturate(75%) brightness(80%);
    background-color: transparent !important;
  }
}
