@import '../../styles/constants';

/* Checkerboard Styling */
$grid-size: 5px;
$checkerboard-color: rgba($primary-color-gray, 0.5);

.ColorSwatchComponent {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;

    width: 25px;
    height: 25px;

    border-left: solid 1px $primary-color-background;
    border-radius: 0 3px 3px 0;
    outline: none;
    cursor: pointer;

    &__swatch {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;

        width: 100%;
        height: 100%;

        border-radius: inherit;
    }

    &__checkerboard {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        width: 100%;
        height: 100%;

        /* stylelint-disable-next-line declaration-colon-space-after */
        background-image:
            linear-gradient(45deg, $checkerboard-color 25%, transparent 25%),
            linear-gradient(-45deg, $checkerboard-color 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, $checkerboard-color 75%),
            linear-gradient(-45deg, transparent 75%, $checkerboard-color 75%);
        background-position: 0 0, 0 $grid-size, $grid-size -#{$grid-size}, -#{$grid-size} 0;
        background-size: #{$grid-size * 2} #{$grid-size * 2};
        border-radius: inherit;
    }
}