@import url("palette.css");
@import url("font-family.css");
@import url("card.css");

:root {
  --container-max-inline-size: clamp(18rem, 90vw, 76rem);
  --wa-font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  --wa-font-family-heading: Inter, Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --wa-border-width-scale: 2;
  --wa-form-control-border-color: var(--wa-color-neutral-90);
  --wa-form-control-border-width: calc(var(--wa-border-width-scale) * 1px);
  --wa-color-focus: var(--wa-color-brand-80);
}

.container {
  max-inline-size: var(--container-max-inline-size);
  margin-inline: auto;

  &:not(:has(header)) {
    height: 100vh;
    margin-inline: 0;
    max-inline-size: 100%;
    background: linear-gradient(15deg, var(--wa-color-brand) 10%, var(--wa-color-brand-90) 80%, var(--wa-color-success-90));
    display: grid;
    align-content: center;
    justify-content: center;
  }
}

main.container {
  padding: var(--wa-space-m) 0;
}

caption {
  caption-side: bottom;
  text-align: start;
}

.pinot-current-user {
  width: 100%;

  div {
    text-align: start;
    overflow: hidden;

    p {
      color: var(--wa-color-neutral-80);
      max-width: 25ch;

    }
  }

  &&::part(base) {
    justify-content: flex-start;
  }

  wa-avatar::part(icon) {
    background-color: var(--wa-color-brand);
    border-radius: 100%;
  }
}

wa-button-group.wa-nowrap::part(base) {
  flex-wrap: nowrap;
}

wa-radio-group.pinot-subject-area-widget {
  &::part(form-control-input) {
    gap: var(--wa-space-xs) var(--wa-space-s);
  }

  wa-radio {
    border-radius: var(--wa-border-radius-pill);
  }
  &::part(form-control-label) {
    text-transform: uppercase;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-bold);
  }
}