ui-express-checkout {
  display: grid;
  gap: var(--spacing-12);

  ui-linked-fields {
    display: grid;
    gap: var(--spacing-12);
  }

  [ui-express-checkout-field] {
    display: grid;
    gap: var(--spacing-8);

    &[error-message] {
      &::after {
        content: attr(error-message);
        position: relative;
        font: var(--font-body-sm);
        color: var(--color-error);
      }
    }

    &:has(input:required, select:required, textarea:required) {
      [ui-express-checkout-label]::after {
        content: " *";
        color: var(--color-error);
      }
    }

    & > input,
    & > select,
    & > textarea,
    & :is([ui-phone-number], [ui-phone-countries-wrapper]) {
      width: 100%;
      outline: none;
      border-radius: var(--radius-xs);
      padding: var(--spacing-12) var(--spacing-16);
      color: var(--color-on-background);
      background-color: var(--color-surface-container);
      border: 1px solid var(--color-surface-container-highest);
      transition: border-color var(--transition-standard-default-effects);

      &::placeholder {
        color: color-mix(in srgb, currentColor 50%, transparent);
      }

      &:focus {
        border-color: var(--color-on-background);
      }
    }

    & > textarea {
      min-height: 43px;
      resize: vertical;
    }

    & > select {
      outline: none;
      cursor: pointer;
      appearance: none;
    }

    &:has(> select) {
      position: relative;

      &::after {
        content: "";
        width: 6px;
        height: 6px;
        rotate: 45deg;
        position: absolute;
        inset-block-end: 20px;
        inset-inline-end: var(--spacing-16);
        border-block-end: 1.2px solid currentColor;
        border-inline-end: 1.2px solid currentColor;
      }
    }
  }
}