@layer env.components {
  .env-graphic {
    --env-graphic-size: var(--env-icon-size, var(--env-control-icon-size));
    display: inline-grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    flex: none;
    box-sizing: border-box;
    inline-size: var(--env-graphic-size);
    block-size: var(--env-graphic-size);
    vertical-align: middle;
  }
  .env-graphic[data-size='text'] {
    --env-graphic-size: 1em;
    vertical-align: -0.125em;
  }
  .env-graphic[data-size='sm'] {
    --env-graphic-size: var(--env-picture-size-sm);
  }
  .env-graphic[data-size='md'] {
    --env-graphic-size: var(--env-picture-size-md);
  }
  .env-graphic[data-size='lg'] {
    --env-graphic-size: var(--env-picture-size-lg);
  }
  .env-graphic[data-size='xl'] {
    --env-graphic-size: var(--env-picture-size-xl);
  }
  .env-graphic[data-size='fill'] {
    display: grid;
    inline-size: 100%;
    block-size: 100%;
    vertical-align: top;
  }
  .env-graphic[data-size='fill']:has(> .env-graphic-mask) {
    aspect-ratio: 1;
  }
  .env-graphic[data-aspect] {
    inline-size: auto;
  }
  .env-graphic[data-size='fill'][data-aspect] {
    inline-size: 100%;
    block-size: auto;
  }
  .env-graphic > * {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .env-graphic[data-fit='cover'] > * {
    object-fit: cover;
  }
  .env-graphic[data-fit='cover'] > .env-graphic-mask {
    mask-size: cover;
  }
  .env-graphic:not([data-tint]) {
    fill: initial;
    stroke: initial;
  }
  .env-graphic[data-tint='text'] > svg:not([fill='none']),
  .env-graphic[data-tint='text']
    > svg
    [fill]:not([fill='none'], :is(defs, mask, clipPath, pattern, marker, symbol) *) {
    fill: currentColor;
  }
  .env-graphic[data-tint='text'] > svg[stroke]:not([stroke='none']),
  .env-graphic[data-tint='text']
    > svg
    [stroke]:not([stroke='none'], :is(defs, mask, clipPath, pattern, marker, symbol) *) {
    stroke: currentColor;
  }
  .env-graphic-mask {
    forced-color-adjust: none;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
  }
  [data-env-skeleton] .env-graphic {
    forced-color-adjust: none;
    border-radius: var(--env-radius-sm);
    --env-skeleton-shape: 1;
    background: var(--env-skeleton-paint);
  }
  [data-env-skeleton] .env-graphic * {
    visibility: hidden;
  }
}