@import "src/assets/scss/variables";

.c-colllect-button {
  position: relative;
  float: right;
  display: block;
  margin: 0 0 0 25px;
  padding: 15px 50px;
  font: $font-label;
  font-weight: $font-weight-source-sans-pro-black;
  text-align: center;
  text-shadow: 0 1px 3px rgba($color-rhino, 0.3);
  color: $color-catskill-white;
  background: $color-chetwode-blue;
  border: 1px solid transparent;
  border-radius: 52px;
  user-select: none;
  transition: background-color 150ms, box-shadow 150ms, transform 150ms;
}

.c-colllect-button:focus {
  outline: none;
}

.c-colllect-button:not(.c-colllect-button__disabled):hover,
.c-colllect-button:not(.c-colllect-button__disabled):focus,
.c-colllect-button:not(.c-colllect-button__disabled):active {
  background: $color-scampi;
  box-shadow: 0 5px 30px rgba($color-scampi, 0.5);
}
.c-colllect-button:not(.c-colllect-button__disabled):active {
  background: $color-rhino;
  box-shadow: 0 3px 20px rgba($color-rhino, 0.6);
  transform: translateY(2px) scale(0.97);
}

.c-colllect-button__type-light {
  background: $color-white;
  color: $color-outer-space;
  text-shadow: none;
  border-color: $color-gull-gray;
}

.c-colllect-button__type-light:not(.c-colllect-button__disabled):hover,
.c-colllect-button__type-light:not(.c-colllect-button__disabled):focus,
.c-colllect-button__type-light:not(.c-colllect-button__disabled):active {
  background: $color-catskill-white;
  box-shadow: 0 5px 30px rgba($color-outer-space, 0.2);
}
.c-colllect-button__type-light:not(.c-colllect-button__disabled):active {
  box-shadow: 0 3px 20px rgba($color-outer-space, 0.25);
}

.c-colllect-button__disabled {
  opacity: 0.3;
  text-shadow: none;
  background: $color-gull-gray;
}
