@import '../../../assets/scss/utils/variables';

.wallnit-button {
  font-size: $standard-font-size;
  font-weight: 500;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  display: block;
  overflow: hidden;
  text-decoration: none;
  letter-spacing: 0.05px;
  outline: none;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  &--text {
    color: $blue-1;
    border-color: transparent;
    background-color: $white;
    &:hover {
      background-color: $blue-2;
    }
    &-disabled {
      cursor: not-allowed;
      opacity: $opacity-disabled;
      &:hover {
        background-color: $white;
      }
    }
  }
  &--outlined {
    color: $blue-1;
    border-color: $blue-1;
    background-color: $white;
    &:hover {
      background-color: $blue-2;
    }
    &-disabled {
      cursor: not-allowed;
      opacity: $opacity-disabled;
      &:hover {
        background-color: $white;
      }
    }
  }
  &--contained {
    color: $white;
    border-color: $blue-1;
    background-color: $blue-1;
    &:hover {
      background-color: $blue-3;
      box-shadow: $box-shadow-button;
    }
    &-disabled {
      cursor: not-allowed;
      opacity: $opacity-disabled;
      &:hover {
        background-color: $blue-1;
        box-shadow: unset;
      }
    }
  }
}