@import 'utils.css';

@layer wa-app {
  wa-page {
    min-block-size: 100%;
    block-size: auto;
  }

  .info-display {
    --background-color: var(--wa-color-surface-raised);
    --border-color: transparent;
    --border-radius: var(--wa-border-radius-l);
    --border-width: 0;
    --padding-block: var(--wa-space-m);
    --padding-inline: var(--wa-space-l);
    & > * {
      margin: 0;
    }
    & .info-display-row,
    & .info-display-header {
      background-color: var(--background-color);
      border-color: var(--border-color);
      border-radius: 0;
      border-style: var(--wa-border-style);
      border-width: var(--border-width);
      margin: 0;
      padding: var(--padding-block) var(--padding-inline);

      &:not(:last-child) {
        margin-block-end: var(--wa-border-width-s);
      }
    }
    & .info-display-header,
    &:not(:has(.info-display-header)) .info-display-row:first-child {
      border-start-start-radius: var(--border-radius);
      border-start-end-radius: var(--border-radius);
    }
    & .info-display-row:last-child {
      border-end-start-radius: var(--border-radius);
      border-end-end-radius: var(--border-radius);
    }
    & wa-divider {
      --spacing: 0;
      border-color: transparent;
    }
    & li {
      list-style: none;
    }
    & li.info-display-row {
      & wa-icon[name='arrow-right'] {
        transition: transform var(--wa-transition-normal) var(--wa-transition-easing);
      }

      &:hover {
        background-color: color-mix(in oklab, currentColor, var(--background-color) 98%);
      }

      &:hover wa-icon[name='arrow-right'] {
        transform: translateX(0.25em);
      }
    }
    & li.info-display-row > a {
      color: var(--wa-color-text-normal);
      text-decoration: none;
    }
  }

  wa-icon.wa-brand,
  wa-icon.wa-neutral,
  wa-icon.wa-success,
  wa-icon.wa-warning,
  wa-icon.wa-danger {
    color: var(--wa-color-fill-loud, currentColor);
  }

  wa-card.form-panel[appearance='filled'] {
    --spacing: var(--wa-space-2xl);
    background-color: var(--wa-color-surface-raised);
    box-shadow: none;
    margin: auto;
  }

  wa-dialog:is(
    #update-account-name-dialog,
    #update-account-email-dialog,
    #update-account-password-dialog,
    #delete-account-dialog
  ),
  wa-card.form-panel {
    & wa-input [slot='label'] {
      font-weight: var(--wa-form-control-label-font-weight);
      margin-block-end: var(--wa-space-xs);
    }
  }

  /* #region Notice callouts (expired, no-payment, etc.) */
  .notice-callout {
    padding: var(--wa-space-l);

    &::part(icon) {
      color: var(--wa-color-brand);
    }

    & wa-icon[slot='icon'] {
      font-size: var(--wa-font-size-2xl);
      margin-block-start: 0.25em;
    }

    & wa-icon[slot='icon'][animation] {
      --animation-delay: 2s;
      --animation-duration: 4s;
    }
  }
  /* #endregion */

  /* #region Plan Card */
  wa-card.plan {
    position: relative;
    background-color: var(--wa-color-surface-raised);
    box-shadow: none;

    & wa-badge.plan-badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      inline-size: max-content;
      margin-inline: auto;
      transform: translateY(-50%);
    }

    &::part(header) {
      flex-direction: column;
      background-color: var(--wa-color-brand-fill-loud);
      color: var(--wa-color-brand-on-loud);
      padding: 0;
    }

    & [slot='header'].background-wa-pattern {
      padding: var(--wa-space-2xl) var(--wa-space-xl);
    }

    & li.wa-flank {
      --flank-size: 1.5em;
    }

    & a {
      color: var(--wa-color-text-normal);
    }

    & wa-avatar.plan-avatar {
      --size: var(--wa-font-size-5xl);
      background-color: var(--wa-color-surface-raised);
      color: var(--wa-color-brand-fill-loud);

      & wa-icon {
        --primary-color: var(--wa-color-text-normal);
        --secondary-opacity: 1;
        --secondary-color: var(--wa-color-brand-fill-loud);
      }
    }

    /* Transitional/celebration icons: use .plan-avatar-transitional on the avatar (added by JS). */
    & wa-avatar.plan-avatar-transitional wa-icon {
      font-size: var(--wa-font-size-2xl);
      --secondary-opacity: 0.4;
    }

    & .plan-features .wa-grid {
      --min-column-size: 25ch;
    }

    &.is-expired {
      &::part(header) {
        background-color: var(--wa-color-neutral-fill-loud);
        color: var(--wa-color-neutral-on-loud);
      }

      & [slot='header'].background-wa-pattern {
        --background-pattern-opacity: 0.15;

        &::after {
          filter: grayscale(1);
        }
      }

      & wa-avatar.plan-avatar {
        color: var(--wa-color-neutral-fill-loud);
      }
    }
  }
  /* #endregion */

  /* #region Discount element */
  discount-element {
    font-variant-numeric: tabular-nums;
  }

  discount-element[orientation='vertical'] {
    line-height: 1;
  }

  discount-element[orientation='vertical']::part(base) {
    display: flex;
    flex-direction: column;
  }

  discount-element::part(strike) {
    color: var(--strike-color, var(--wa-color-neutral-border-normal));
    text-decoration-line: var(--strike-decoration-line, line-through);
    text-decoration-color: var(--strike-decoration-color, var(--wa-color-neutral-border-normal));
    text-decoration-style: var(--strike-decoration-style, solid);
  }

  discount-element::part(base) {
    display: inline-flex;
    gap: var(--strike-gap, var(--wa-space-xs));
    font-family: cera-round-pro;
  }
  /* #endregion */

  /* #region Purchase Flow */
  .page-purchase {
    /* Page background when body has .page-purchase */
    &,
    & wa-page {
      background-color: var(--wa-color-surface-lowered);
    }

    /* Required indicator for email input split label */
    & #email-input[required] span {
      display: inline-flex;

      &::after {
        content: ' ' var(--wa-form-control-required-content);
        margin-inline-start: var(--wa-form-control-required-content-offset);
        color: var(--wa-form-control-required-content-color);
      }
    }
    & #email-input[required]::part(label)::after {
      display: none;
    }

    & wa-number-input#seats-input {
      &::part(input) {
        padding: 0;
      }
      &::part(start) {
        margin-inline-start: 0;
      }
    }

    & .wrapper-pricing-interval {
      padding-inline: var(--wa-space-m);
      position: absolute;
      inset-block-start: calc(var(--spacing) * -1.33);
      inset-inline-start: 50%;
      transform: translateX(-50%);
      z-index: 1;
      background-color: var(--wa-color-surface-raised);
    }

    & #pricing-interval {
      &::part(control) {
        background-color: var(--wa-form-control-activated-color);
        border-color: var(--wa-form-control-activated-color);
      }
      &::part(thumb) {
        background-color: var(--wa-color-surface-default);
      }
    }

    & #purchase-form wa-button[type='submit'] {
      inline-size: 100%;
    }

    & wa-card.form-panel[appearance='filled'] {
      margin: initial;

      &::part(header) {
        padding-block: calc(var(--spacing) * 0.75) var(--spacing);
      }
    }

    & .price-amount {
      font-size: var(--wa-font-size-4xl);
      font-weight: var(--wa-font-weight-bold);
    }
    & .price-with-discount discount-element.price-amount::part(original) {
      font-size: var(--wa-font-size-2xl);
    }
    & .price-with-discount .per-seat-explanation discount-element::part(original) {
      font-size: inherit;
    }

    & .faqs wa-details {
      --spacing: var(--wa-space-s);

      &::part(header),
      &::part(content) {
        padding-inline: var(--wa-space-2xl);
      }

      &::part(icon) {
        color: var(--wa-color-neutral-border-normal);
        font-size: var(--wa-font-size-xl);
      }

      &::part(summary) {
        font-weight: var(--wa-font-weight-bold);
      }

      &::part(content) {
        position: relative;
        inset-inline-start: var(--wa-space-2xl);
        padding-block-start: 0;
      }
    }
  }
  /* #endregion */

  /* #region Account Menu */
  /* login button */
  #login-button-icon {
    display: none;
  }

  #login-button-icon + wa-tooltip {
    display: none;
  }

  wa-page[view='mobile'] #login-button-text {
    display: none;
  }

  wa-page[view='mobile'] #login-button-icon {
    display: inline-block;
  }

  wa-page[view='mobile'] #login-button-icon + wa-tooltip {
    display: block;
  }

  /* account menu */
  .account-menu-header {
    padding: var(--wa-space-m);
  }

  /* distinguish current workspace in account menu */
  .account-menu-workspace-item.is-current {
    &:hover {
      background-color: var(--wa-color-brand-fill-normal);
    }
    background-color: var(--wa-color-brand-fill-quiet);
  }

  /* account menu trigger: avatar + optional name (wide subheader); name also in dropdown */
  #account-menu-trigger {
    border: 0;

    &:hover::part(base) {
      background-color: transparent;
    }

    &::part(base) {
      padding: 0;
    }

    & wa-avatar {
      --size: var(--wa-font-size-2xl);
    }

    /* notifications visual badge/indicator */
    & wa-badge.avatar-badge {
      inset-inline-start: 1.25rem;
      inset-block-start: 0.25rem;
      inline-size: 0.67rem;
      block-size: 0.67rem;
      padding: 0;
      animation: badge-pulse 2s ease-in-out infinite;
    }
  }

  .account-menu-user-label {
    display: block;
    max-inline-size: 20ch; /* truncate long display names */
  }

  @keyframes badge-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
    }
    35% {
      box-shadow: 0 0 0 0.25rem transparent;
    }
    50%,
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }

  /* Narrow (≤ 80ch): compact subheader with logo */
  @container subheader (inline-size <= 80ch) {
    #account-menu-trigger::part(caret),
    #account-menu-trigger .account-menu-user-label {
      display: none;
    }
    #account-menu-trigger wa-avatar[slot='start'] {
      margin-inline-end: 0;
    }
  }
  /* #endregion */

  /* #region Settings */
  :is(#account-info-settings, #workspace-settings) .wa-flank {
    --flank-size: 15ch;
  }

  #account-info-settings {
    & .info-display-row:has(wa-button:hover) {
      background-color: color-mix(in oklab, currentColor, var(--background-color) 98%);

      & wa-button {
        --background-color-hover: transparent;
      }
    }
  }
  /* #endregion */

  /* #region Workspace Dashboard */
  #dashboard {
    & wa-card[appearance='filled'] {
      background-color: var(--wa-color-surface-raised);
      box-shadow: none;
    }

    & .greeting {
      --greeting-background-color: var(--wa-color-surface-default);
      --greeting-lines-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 80%);
      --greeting-lines-width: var(--wa-border-width-s);
      --greeting-grid-size: calc((var(--wa-space-2xl) + var(--wa-space-l) + (1em * var(--wa-line-height-normal))) / 2);
      background:
        linear-gradient(176deg, var(--greeting-background-color) 0 20%, transparent),
        linear-gradient(90deg, var(--greeting-background-color) 0 40%, transparent),
        repeating-linear-gradient(
          to top,
          var(--greeting-lines-color),
          var(--greeting-lines-color) var(--greeting-lines-width),
          transparent var(--greeting-lines-width),
          transparent var(--greeting-grid-size),
          var(--greeting-lines-color) var(--greeting-grid-size)
        ),
        repeating-linear-gradient(
          to left,
          var(--greeting-lines-color),
          var(--greeting-lines-color) var(--greeting-lines-width),
          transparent var(--greeting-lines-width),
          transparent var(--greeting-grid-size),
          var(--greeting-lines-color) var(--greeting-grid-size)
        ),
        var(--greeting-background-color);
      border-radius: var(--wa-border-radius-l);
      padding: var(--wa-space-2xl);
    }

    & wa-card.plan {
      .kudos {
        font-size: var(--wa-font-size-s);
      }
    }

    & wa-avatar:not(.plan-avatar) {
      --size: var(--wa-font-size-3xl);
    }

    .support-cards {
      & a:has(> wa-card) {
        display: block;
      }

      & .wa-grid wa-card {
        block-size: 100%;
      }
    }

    .info-display wa-badge.pro {
      font-size: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* ~10px */
    }
  }

  wa-avatar:not(.plan-avatar) {
    --size: var(--wa-font-size-3xl);
  }

  /* #region Members */
  .member.pending-invitation wa-avatar {
    background-color: var(--wa-color-neutral-fill-quiet);
    color: color-mix(in oklab, var(--wa-color-neutral-on-quiet), transparent 75%);
  }

  .member wa-avatar.appearance-brand {
    background-color: var(--wa-color-brand-fill-normal);
    color: var(--wa-color-brand-on-normal);
  }
  /* #endregion */

  /* #region Invitations (workspaces index pending-invite callout) */
  .info-display.invitations {
    --background-color: var(--wa-color-brand-fill-normal);
    --border-color: var(--wa-color-brand-border-normal);
    --border-width: var(--wa-border-width-s);

    & wa-icon[name='envelope-dot'] {
      color: var(--wa-color-brand-on-normal);
    }
  }
  /* #endregion */

  /* #region 2FA */
  .page-verify {
    .verify-2fa-card::part(body) {
      padding-block-start: var(--wa-space-s);
    }
  }
  /* #endregion */

  /* #region Junk Drawer */
  /* TODO: fix flash styling across app */
  .layout-site,
  .layout-site-focused {
    /* removing inline margin and setting more bottom padding on flashes */
    wa-callout.flash {
      margin-inline: var(--flash-margin-inline, 0) !important;
      margin-block-end: var(--flash-margin-block-end, var(--wa-space-xl)) !important;
    }

    /* setting flashes parent to be fixed width */
    #flashes {
      margin-inline: auto;
      max-inline-size: var(--content-width-l);
    }
  }

  /* TODO: maybe move this into webawesome-pro's site.css since it pertains to the Home view? */
  .page-home #flashes {
    padding-inline: var(--content-padding-inline);
  }
  /* #endregion */
}