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

  &-choice {
    width: 50px;
    height: 50px;
    border: 1px solid #FFF;
    transition: all .2s ease;
    cursor: pointer;

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

    @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');
        }
      }
    }

  }

}