@layer toptasks {
  .frame-type-windfce_toptasks {
    --_toptask-background: var(--wind-fce-color-surface, #fff);
    --_toptask-background-hover: var(--wind-fce-color-primary-light, #eff6ff);
    --_toptask-foreground: var(--wind-fce-color-text, #1e293b);
    --_toptask-border: var(--wind-fce-color-border-light, #cbd5e1);
    &.frame-layout-1 {
      --_toptask-background: var(--wind-fce-color-primary, #bfdbfe);
      --_toptask-background-hover: var(--wind-fce-color-primary-hover, #93c5fd);
      --_toptask-foreground: var(--wind-fce-color-on-primary, #1e293b);
      --_toptask-border: transparent;
    }
    &.frame-layout-2 {
      --_toptask-background: var(--wind-fce-color-secondary, #fde68a);
      --_toptask-background-hover: var(
        --wind-fce-color-secondary-hover,
        #fcd34d
      );
      --_toptask-foreground: var(--wind-fce-color-on-secondary, #1e293b);
      --_toptask-border: transparent;
    }
    &.frame-layout-3 {
      --_toptask-background: var(--wind-fce-color-accent, #a7f3d0);
      --_toptask-background-hover: var(--wind-fce-color-accent-hover, #6ee7b7);
      --_toptask-foreground: var(--wind-fce-color-on-accent, #1e293b);
      --_toptask-border: transparent;
    }
    .toptasks {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      inline-size: 100%;
      margin-inline: auto;
      padding: 0;
      list-style: none;
      gap: 1.25rem;
      .toptask-item {
        flex-grow: 1;
        min-width: 12.9375rem;
        min-height: 12.5rem;
        background: var(--_toptask-background);
        color: var(--_toptask-foreground);
        border: 1px solid var(--_toptask-border);
        a {
          color: inherit;
        }
        .toptask-item-inner {
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          gap: 0.9375rem;
          padding: 1.25rem;
          height: 100%;
          span {
            order: 1;
          }
          img {
            order: 0;
            width: 3.125rem;
            max-height: 3.125rem;
            object-fit: contain;
          }
        }
      }
    }
  }
}