/*
  Container component
  
  Structure:
  .a-container             - Surface wrapper (defaults to medium size)
  
  Sizes:
  .a-container--xs         - Extra small padding + radius
  .a-container--sm         - Small padding + radius
  .a-container--md         - Medium padding + radius (default)
*/

.a-container {
  --padding: var(--lens-semantic-spacing-desktop-padding-2);
  --border-radius: var(--lens-core-spacing-2);
  --border-width: var(--lens-semantic-border-width-thin);
  --border-color: var(--lens-semantic-color-outline-fixed);
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
  padding: var(--a-container-padding, var(--padding));
  border: var(--a-container-border-width, var(--border-width)) var(--lens-core-border-style-solid)
    var(--a-container-border-color, var(--border-color));
  border-radius: var(--a-container-border-radius, var(--border-radius));
  &.a-container--xs {
    --padding: var(--lens-semantic-spacing-desktop-padding-1);
    --border-radius: var(--lens-semantic-radius-md);
  }
  &.a-container--sm {
    --padding: var(--lens-semantic-spacing-desktop-padding-1-5);
    --border-radius: var(--lens-semantic-radius-lg);
  }
  &.a-container--md {
    --padding: var(--lens-semantic-spacing-desktop-padding-2);
    --border-radius: var(--lens-core-spacing-2);
  }
}