/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../styling/context/theming.scss' as theming;

@layer storybook {
  .primitive-colors {
    display: flex;
    flex-direction: column;
    gap: 1lh;
    
    .color-category {
      .colors-list {
        --item-size: 5rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--item-size), 100%), 1fr));
        gap: 2ch;
        
        .color {
          min-block-size: 4rem;
          padding: 0.5rem;
          background: var(--color);
          border: 1px solid color-mix(in sRGB, var(--color) 90%, black);
          box-shadow: 1px 1px 3px color-mix(in sRGB, var(--color) 90%, black);
          
          display: flex;
          flex-direction: column;
          justify-content: end;
          
          color: black;
          /* color: color-contrast(var(--color) vs #171717, #e5e5e5); // Insufficient browser support */
          /* color: white; mix-blend-mode: difference; // Works but results in some ugly colors */
          color: lch(from var(--color) calc((49.44 - l) * infinity) 0 0); // https://codepen.io/devongovett/pen/QwLbRrW
          
          font-size: 0.8rem;
          
          dt, dd {
            all: unset;
            color: inherit;
          }
          dt {
            font-weight: 600;
          }
        }
        
        &.color-spectrum .color {
          background: color-mix(in sRGB, var(--color) calc(var(--lightness) / 9 * 100%), black);
        }
      }
    }
  }
  
  .theme-demo {
    @include theming.theme-invert;
  }
}
