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

.p-colllect-styleguide {
  padding: 20px;
  color: $color-shark;
}

.p-colllect-styleguide h1 {
  color: $color-white;
}

.p-colllect-styleguide--block {
  padding: 80px;
  margin-bottom: 20px;
  border-radius: $border-radius;
  background: $color-white;
}

.p-colllect-styleguide--block::after {
  content: "";
  display: block;
  clear: both;
}

.p-colllect-styleguide--block h2 {
  margin: 0 0 30px;
  font-family: $font-family-cocogoose;
  font-weight: normal;
}

.p-colllect-styleguide--form {
  display: flex;
}

.p-colllect-styleguide--form > * {
  display: block;
  width: 40%;
}

.p-colllect-styleguide--form-fields-values-column {
  margin-left: 20%;
}

.p-colllect-styleguide--colors {
  margin: -15px;
}

.p-colllect-styleguide--color-group {
  clear: both;
}

.p-colllect-styleguide--color {
  float: left;
  width: calc(16.66% - 30px);
  padding: calc(14% - 69px) 15px 15px;
  margin: 15px;
  border-radius: $border-radius;
  font-size: 16px;
  font-weight: bold;
  color: $color-white;
  background-image: linear-gradient(transparent calc(100% - 50px), rgba(0, 0, 0, 0.35) 1px);
  text-shadow: 0 1px 3px rgba($color-rhino, 0.5);
  box-shadow: 0 10px 20px rgba($color-rhino, 0.3);

}

.p-colllect-styleguide--color:hover {
  position: relative;
  transform: scale(1.5);
  box-shadow: none;
  z-index: 1;
}

.p-colllect-styleguide--color:hover {
  background-image: linear-gradient(transparent calc(100% - 77px), rgba(0, 0, 0, 0.5) 1px);
}

.p-colllect-styleguide--color:hover .p-colllect-styleguide--color-value {
  opacity: 0.7;
}

.p-colllect-styleguide--color-value {
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}

.p-colllect-styleguide--color-name {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-colllect-styleguide--font {
  margin-bottom: 20px;
}

.p-colllect-styleguide--font-value {
  display: block;
  margin-bottom: 5px;
}
