@import 'assets/stylesheets/base_styles/colors';

@mixin color-props($color) {
  background-color: $color;
  width: 100px;
  height: 100px;
}

@mixin before-props($name) {
  content: $name;
  display: block;
  min-width: 75px;
  font-size: .75rem;
  margin: auto;
  padding: 4px;
  background-color: rgba(0,0,0,.3);
  color: color('neutral-8');
}

@mixin after-props($color) {
  content: '#{$color}';
  color: color('neutral-1');
  display: block;
  min-width: 75px;
  font-size: .75rem;
  margin: auto;
  padding: 4px;
  background-color: rgba(255,255,255,.5);
}

.color-wrapper {
  display: flex;
  flex-wrap: wrap;
}

@keyframes swing {
  0% {
    transform: perspective(0) rotateX(0deg);
  }

  50% {
    transform: perspective(500px) rotateX(-15deg);
  }

  100% {
    transform: perspective(500px) rotateX(30deg);
  }
}

@each $color-key in map-keys($colors-map) {
  .#{$color-key} {
    $color: #{map-get($colors-map, #{$color-key})};
    color: $color;
    @include color-props($color);
    border-color: #fff;
    transform-origin: center top;

    &:before {
      @include before-props('#{$color-key}');
    }

    &:after {
      @include after-props($color);
    }

    &:hover {
      box-shadow: 0 2px 3px rgba(0,0,0,0.2);
      animation: swing 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }
  }
}