.colorpicker {
  display: flex;
  align-items: center;
  height: 60px;

  &-choice {
    width: 50px;
    height: 50px;
    border: 1px solid #FFF;
    transition: all .2s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &.is-active, &:hover {
      border-width: 5px;
      border-radius: 3px;
      width: 60px;
      height: 60px;
    }

    &.is-active::before {
      content: 'X';
      font-weight: 700;
      color: rgba(255,255,255,.5);
    }

    @each $color, $colorvalue in $material-colors {
		  &.is-#{$color} {
        background-color: mc($color, '500');
        border-color: mc($color,'500');

        &.is-active, &:hover {
          border-color: mc($color,'300');
        }
      }
    }

  }

}