@media screen {
  @layer page.components {
    @layer form {

      :root {
        --form-background: rgba(0 0 0 / 20%);
        --form-border: var(--theme-teal);
        --form-border-radius: var(--theme-border-radius_sm);
        --form-focus-color: color-mix(in srgb, var(--theme-teal) 40%, transparent);
        --form-gap: var(--theme-gap-2);
      }

      /* Form */
      form {
        container: form / inline-size;
      }
      fieldset {
        border: 0;
        margin: 0;
        padding: 0;
      }
      fieldset + fieldset {
        margin-block-start: var(--theme-gap-3);
      }
      legend {
        font-family: var(--theme-font-bold);
        font-size: var(--theme-font-size-2);
        line-height: var(--theme-line-height-2);
        margin-block-end: var(--theme-gap-2);
      }


      /* Inline List */
      form .inline-list {
        align-items: center;
        gap: var(--theme-gap-1);
        margin: 0;
        min-block-size: 3rem;
      }
      form .inline-list label {
        margin: 0;
      }
      form .inline-list input[type="checkbox"] {
        margin-inline-end: .625rem;
      }
      

      /* Contacts List */
      .contacts-list {
        display: grid;
        gap: var(--form-gap);
        grid-template-columns: repeat(2, 1fr);
        list-style: none;
        margin: 0;
        padding: 0;
      }
      @container form (max-inline-size: 25rem) {
        .contacts-list {
          grid-template-columns: 1fr;
        } 
      }


      /* Field Grid */
      form pint-grid {
        margin: 0;
      }
      form pint-grid[columns="3-1"] {
        gap: var(--theme-gap-1);
      }
      fieldset:has(pint-field) {
        display: grid;
        gap: var(--form-gap);
        grid-template-columns: repeat(2, 1fr);
      }
      fieldset[data-columns="3"]:has(pint-field) {
        grid-template-columns: 1fr;
      }
      /* 'Alerts' inline list */
      fieldset[data-columns="alerts"]:has(pint-field) {
        grid-template-columns: 1fr;
        row-gap: var(--theme-gap-3);
      }
      @container main (min-inline-size: 37.5rem) {
        fieldset[data-columns="3"]:has(pint-field) {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @container main (min-inline-size: 48rem) {    
        form-grid {
          display: grid;
          gap: var(--theme-gap-4);
          grid-template-columns: repeat(2, 1fr);
        }
        fieldset[data-columns="alerts"]:has(pint-field) {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @container main (min-inline-size: 64rem) {  
        form-grid:has(aside) {
          gap: calc( var(--theme-gap-4) + 4rem );
          grid-template-columns: 1.4fr .6fr;
        }
        fieldset[data-columns="3"]:has(pint-field) {
          grid-template-columns: repeat(3, 1fr);
        }
        fieldset[data-columns="alerts"]:has(pint-field) {
          grid-template-columns: 1.2fr .8fr;
        }
      }
      @container main (max-inline-size: 25rem) {
        fieldset:has(pint-field) {
          grid-template-columns: 1fr;
        } 
      }


      /* Sidebar */
      form aside {
        margin-block-start: var(--theme-gap-6);
        position: relative;
      }
      form aside:before {
        background-color: var(--theme-teal);
        block-size: .0625rem;
        content: '';
        display: block;
        inline-size: 100%;
        inset: 0 auto auto 0;
        position: absolute;
        transform: translateY( calc( -1 * var(--theme-gap-6) / 2 ) );
      }
      form aside fieldset {
        display: block;
      }
      form aside p {
        margin: 0 0 var(--theme-gap-2);
      }
      form aside ul {
        list-style: none;
        margin: 0 0 var(--theme-gap-3);
        padding: 0;
      }
      @container form (min-inline-size: 48rem) {   
        form aside {
          margin: 0;
        }
        form aside:before {
          block-size: 100%;
          inline-size: .0625rem;
          transform: translateX( calc( -1 * var(--theme-gap-2)) );
        }
      }
      @container form (min-inline-size: 64rem) {   
        form aside:before {
          transform: translateX( calc( -1 * var(--theme-gap-4)) );
        }
      }


      /* Field Group */
      pint-field {
        display: block;
        position: relative;
      }
      pint-field[column="full"] {
        grid-column: 1 / -1;
      }
      /* Show invalid icon if field is invalid (only after user blur, not on load) */
      pint-field:after {
        background-repeat: no-repeat;
        background-position: center;
        content: '';
        display: none;
        height: 1.125rem;
        inline-size: 1.125rem;
        inset: 3.5rem .875rem auto auto;
        pointer-events: none;
        position: absolute;
        transform: translateY(-50%);
      }
      pint-field:has(:user-invalid):after {
        background-image: url('../../assets/images/icons/error.svg');
        display: block;
      }
      /* No Success */
      pint-field[type="no-success"]:after {
        display: none !important;
      }
      /* Inline */
      pint-field[type="inline"] {
        display: flex;
        flex-wrap: wrap;
      }


      /* Label */
      form label {
        display: flex;
        place-items: center;
        transition: color .4s;
      }
      form pint-field label {
        margin-block-end: .5rem;
        text-transform: uppercase;
      }
      form pint-field label.alt {
        color: var(--theme-teal);
        text-transform: unset;
      }
      form label[for],
      form label:has([type="checkbox"]) {
        cursor: pointer;
      }
      .required {
        color: var(--theme-teal);
      }
      form label .required {
        font-size: 90%;
        transform: translateY(-.125rem);
      }


      /* Input / Textarea */
      main :where([type="email"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"], textarea) {
        background: var(--form-background);
        border: .0625rem solid var(--form-border);
        border-radius: var(--form-border-radius);
        box-sizing: border-box;
        color: var(--theme-white);
        inline-size: 100%;
        min-block-size: 3rem;
        outline: none;
        padding-inline: 1rem 3.75rem;
        transition: border-color .4s;
      }
      main :where([type="email"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"], textarea)::placeholder {
        color: var(--form-border);
        transition: color .4s;
      }
      main :where([type="email"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"], textarea):focus {
        border-color: var(--form-focus-color);
      }
      main :where([type="email"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"], textarea):focus::placeholder {
        color: var(--theme-teal);
      }
      textarea {
        padding-block: var(--theme-gap-1);
      }

      /* Show success icon (checkmark) */
      pint-field:has( :where([type="email"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"], textarea):not(:placeholder-shown):user-valid ):after {
        background-image: url('../../assets/images/icons/success.svg');
        display: block;
      }

      
      /* Checkmark */
      input[type="checkbox"] {
        appearance: none;
        background: var(--form-background);
        border: .0625rem solid var(--form-border);
        border-radius: .25rem;
        block-size: 1.5rem;
        cursor: pointer;
        inline-size: 1.5rem;
        margin-inline-end: .875rem;
        outline: none;
        position: relative;
        transition: border-color .4s;
      }
      input[type="checkbox"]:checked:after {
        color: var(--theme-teal);
        content: '✓';
        font-size: 1.1875rem;
        inset: 0 auto auto .1875rem;
        position: absolute;
      }
      input[type="checkbox"]:focus-visible {
        border-color: var(--form-focus-color);
      }
      form label:has( input[type="checkbox"]:focus-visible) {
        color: var(--theme-teal);
      }

      /* Select */
      pint-select {
        background: var(--form-background);
        border: .0625rem solid var(--form-border);
        border-radius: var(--form-border-radius);
        box-sizing: border-box;
        color: var(--theme-white);
        cursor: pointer;
        display: flex;
        inline-size: 100%;
        min-block-size: 3rem;
        outline: none;
        place-items: center;
        position: relative;
        transition: border-color .4s;
      }
      label.alt + pint-select {
        border-color: var(--theme-teal);
      }
      pint-select:after {
        background: url('../../images/icons/select.svg') no-repeat center;
        background-size: cover;
        block-size: .4375rem;
        content: '';
        display: block;
        inline-size: 14px;
        inset: 50% 0 auto auto;
        pointer-events: none;
        position: absolute;
        transform: translate(-100%, -.125rem);
      }
      pint-select select {
        appearance: none;
        background: none;
        block-size: 3rem;
        border: 0;
        box-sizing: border-box;
        color: var(--theme-white);
        cursor: pointer;
        font-family: var(--theme-font-regular);
        font-size: var(--theme-font-size);
        line-height: var(--theme-line-height);
        inline-size: 100%;
        outline: none;
        padding-inline: 1rem 3.75rem;
      }
      pint-select:has( select:focus-visible ) {
        border-color: var(--form-focus-color);
        box-shadow: var(--theme-box-shadow);
      }
      pint-select option {
        color: var(--theme-black);
      }
      

      /* Buttons */
      pint-field:not(:has(label)) .button {
        margin-block-start: 2rem;
      }
      form .pint-buttons {
        padding: 0;
        place-content: start;
        margin-block-start: var(--theme-gap-3);
      }


      /* Pagination */
      .pint-pagination {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        list-style: none;
        margin: var(--theme-gap-6) 0 0;
        padding: 0;
        place-content: center;
      }
      .pint-pagination.left {
        place-content: start;
      }
      .pint-pagination li + li {
        margin-block-start: 0 !important;
      }
      .pint-pagination :where(a, button) {
        background: none;
        block-size: 2rem;
        border: .0625rem solid var(--theme-gray);
        border-radius: 50%;
        box-sizing: border-box;
        color: var(--theme-white);
        cursor: pointer;
        display: flex;
        inline-size: 2rem;
        opacity: 1;
        overflow: hidden;
        place-content: center;
        place-items: center;
        text-decoration: unset;
        transition: border .4s, opacity .4s;
      }
      .pint-pagination :where(a, button).button-next {
        margin-inline-start: var(--theme-gap-1);
      }
      .pint-pagination :where(a, button).button-prev {
        margin-inline-end: var(--theme-gap-1);
      }
      .pint-pagination :where(a, button)[disabled] {
        cursor: not-allowed;
        opacity: .4;
      }
      .pint-pagination :where(a, button)[aria-current="true"] {
        border-color: var(--theme-teal);
      }
      .pint-pagination :where(a, button):hover {
        border-color: var(--theme-teal);
      }
      .pint-pagination :where(a, button)[disabled]:hover {
        border-color: var(--theme-gray);
      }
      .pint-pagination :where(a, button) span {
        display: none;
      }
      .pint-pagination :where(a, button) pint-icon {
        block-size: .75rem;
        inline-size: auto;
      }
      
    }
  }
}