Kalkuli/2018.2-Kalkuli_Front-End

@import "../../../../assets/sass/main.scss";

.base-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 4px;
  user-select: none;
  height: 40px;
  cursor: pointer;
  width: 15rem;
  transition: all .2s;
  text-align: center;
  padding: .5rem;

  @media screen and (max-width: 980px) {
    font-size: 1.3rem;
  }
  &--small {
    width: 8em;
    font-size: 1.5rem;
  }
  &--medium {
    width: 15em;
    font-size: 1.4rem;
    margin-bottom: 1.2em;
  }
}

.confirm {
  color: $color-white;
  background-color: $color-dark-blue;
  border: 2px solid $color-dark-blue;
  &:hover {
    background-color: $color-light-blue;
    border: 2px solid $color-light-blue;
  }
}

.delete {
  text-align: center;
  color: $color-red;
  border: 1px solid $color-red; 
  &:hover {
    color: $color-white;
    background-color: $color-red;
  }
}

.no-background {
  color: $color-dark-blue;
  border: 2px solid $color-dark-blue;
  &:hover {
    background-color: $color-light-blue;
    color: $color-white;
    border: 2px solid $color-light-blue;
  }
}

.disable {
  cursor: not-allowed;
  color: $color-white;
  background-color: rgba($color-dark-blue, .6);
}