import { css } from 'lit';

export const styles = css`
  :host {
    display: inline-block;
  }

  .swatch {
    position: relative;
    width: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
    height: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0;
    outline: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
  }

  .swatch:hover {
    transform: translateY(-1px);
  }


  .swatch__fill {
    position: absolute;
    inset: 0;
  }

  .swatch__check {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.24));
  }

  .swatch__check nile-glyph {
    --size: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
    display: block;
  }
`;