/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 version
*/

.button {
  padding: var(--small) var(--large);
  background: var(--primary-color);
  color: var(--secondary-text-color);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  -webkit-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  -webkit-animation: fadeIn 3s ease-in-out;
          animation: fadeIn 3s ease-in-out;
  cursor: pointer;
}

.button:active {
  -webkit-transform: scale(0.98);
      -ms-transform: scale(0.98);
          transform: scale(0.98);
}

.button:hover {
  background-color: var(--secondary-color);
}

.button--disabled {
  background: var(--disabled-button);
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  -webkit-animation: none;
          animation: none;
}

.button--disabled:hover {
  background: var(--disabled-button);
}

.button--disabled:active {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.button--order {
  -webkit-animation: none;
          animation: none;
  width: 300px;
}
.button--order:hover {
  background-color: var(--text-color);
}

.button--view {
  -webkit-animation: none;
          animation: none;
  height: 70px;
  margin: var(--small);
}

.button--back {
  -webkit-animation: none;
          animation: none;
  height: 40px;
  margin: var(--xsmall);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button--view:hover {
  background-color: var(--text-color);
}

.button--minus,
.button--plus {
  padding: var(--small);
}

@media (max-width: 1024px) {
  .button--view {
    height: unset;
  }
}

@media (max-width: 768px) {
  .button--view {
    padding: var(--small);
    width: 80%;
  }
}