.palette-sample {
  @include box(140px, 140px, true);
  margin-top: 10px;
  margin-bottom: 10px;
  border: 4px solid white;
  position: relative;
  &:before {
    background: #aaaaaa;
    position: absolute;
    top: -6px;
    bottom: -6px;
    right: -6px;
    left: -5px;
    content: " ";
    border-radius: 100%;
    z-index: -1;
    box-shadow: 0px 0px 10px 2px rgba(217, 217, 217, 0.91);
  }
  &__primary-color {
    background-color: $primary-color;
  }
  &__primary-darken-color {
    background-color: $primary-darken-color;
  }
  &__primary-light-color {
    background-color: $primary-light-color;
  }
  &__hover-light-color {
    background-color: $hover-light-color;
  }
  &__primary-very-light-color {
    background-color: $primary-very-light-color;
  }
  &__secondary-color {
    background-color: $secondary-color;
  }
  &__success-color {
    background-color: $success-color;
  }
  &__success-light-color {
    background-color: $success-light-color;
  }
  &__attention-color {
    background-color: $attention-color;
  }
  &__warning-color {
    background-color: $warning-color;
  }
  &__warning-medium-color {
    background-color: $warning-medium-color;
  }
  &__warning-light-color {
    background-color: $warning-light-color;
  }
  &__alert-color {
    background-color: $alert-color;
  }
  &__alert-light-color {
    background-color: $alert-light-color;
  }
}