// Utilities :: Masks

.u-mask {
  &--swatch {
    mask-image: url('https://images.sofology.co.uk/image/upload/v1560938888/Swatch-Service/swatch-mask.svg');
    mask-size: contain;
  }
}

.u-mask--swatch--footer {
  position: relative;
  .u-mask--swatch {
    cursor: pointer;
    opacity: 0.8;
    transition: $fabric-global-transition;

    &:hover {
      opacity: 1;
    }
  }
  .u-mask--swatch__icon {
    @include absolute(top 50% left 50%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: $fabric-global-transition;

    padding: 2px;
    border-radius: 3px;
  }

  &:hover {
    .u-mask--swatch__icon {
      opacity: 1;
    }
  }
}