@import '../../../styles/colors';
@import '../../../styles/vars';

.button {
  @extend %fontNormal;
  background-color: $skyBlue100;
  border-radius: 0;
  height: 3.2rem;
  line-height: initial;
  margin-right: 1%;
  text-transform: none;

  &Label {
    @extend %fontNormal;
    color: $white;
    font-size: 1rem;
    text-transform: none;
  }

  &Secondary {
    background-color: $yellow100;
    color: $textBlack;

    > span {
      color: $textBlack;
    }
  }

  &Outlined {
    background-color: $white;
    color: $skyBlue100;

    > span {
      color: $skyBlue100;
    }

    &Secondary {
      background-color: $white;
      color: $textBlack;

      > span {
        color: $textBlack;
      }
    }
  }

  &Disabled {
    background-color: $grey35 !important;
    border-color: $grey35 !important;
    box-shadow: none !important;
  }
}