@lightBlack: var(--light-black, #eee);
@ultraLightGrey: var(--ultra-light-grey, #111);

.color-picker-widget {
  .wrapper {
    flex-wrap: wrap;
    padding: 0.5rem 0;

    .buttons {
      flex: 1 1 100%;
      margin: 1rem 0 0.5rem;
      text-align: center;
    }
  }

  .button {
    position: relative;
    padding: 1rem;
    border: 2px solid #ccc;

    &.active {
      border: 2px solid @red;

      &:after {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 100%;
        background-color: @red;
        content: '';
      }
    }
  }

  .button.transparent,
  .button.transparent.active,
  .button.outline-white,
  .button.outline-white.active {
    background: repeating-linear-gradient(
      45deg,
      #ccc,
      #ccc 10px,
      #fff 10px,
      #fff 20px
    );
  }

  .button.outline-blue,
  .button.blue,
  .button.outline-blue.active {
    background: repeating-linear-gradient(
      45deg,
      @blue,
      @blue 10px,
      #eee 10px,
      #eee 20px
    );
  }

  .button.white,
  .button.white.active {
    background-color: #fff;
  }

  .button.grey,
  .button.grey.active {
    background-color: @lightBlack;
  }

  .button.light-grey,
  .button.light-grey.active {
    background-color: @ultraLightGrey;
  }

  .button.image,
  .button.image.active {
    position: relative;
    overflow: visible;
    max-width: unset;
    padding: 0.45rem;
    background-color: @ultraLightGrey;
    vertical-align: bottom;

    &:before {
      display: block;
      width: 20px;
      height: 20px;
      background-image: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJpbWFnZS1wb2xhcm9pZCIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWltYWdlLXBvbGFyb2lkIGZhLXctMTQiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNDE2IDMySDMyQTMyIDMyIDAgMCAwIDAgNjR2Mzg0YTMyIDMyIDAgMCAwIDMyIDMyaDM4NGEzMiAzMiAwIDAgMCAzMi0zMlY2NGEzMiAzMiAwIDAgMC0zMi0zMnptLTE2IDQwMEg0OHYtNjRoMzUyem0wLTExMmgtMTZsLTk3LjA3LTEyMWMtNy40Ni05LjMxLTIyLjQtOS4zMS0yOS44NiAwbC02My4zOCA3OS0zMy4wNS00NS43OGMtNy45Mi0xMS0yNS4zNi0xMS0zMy4yOCAwTDY0IDMyMEg0OFY4MGgzNTJ6TTE0NCAxNzZhMzIgMzIgMCAxIDAtMzItMzIgMzIgMzIgMCAwIDAgMzIgMzJ6Ij48L3BhdGg+PC9zdmc+');
      background-repeat: no-repeat;
      background-size: 20px;
      content: '';
    }
  }
}

.has--backgroundColor--blue {
  background: @blue;
}