.Stack {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));

  /* non-responsive values */

  &[data-padding='none'],
  &[data-padding-narrow='none'] {
    padding: 0;
  }

  &[data-padding='condensed'],
  &[data-padding-narrow='condensed'] {
    /* stylelint-disable-next-line primer/spacing */
    padding: var(--stack-padding-condensed, 8px);
  }

  &[data-padding='normal'],
  &[data-padding-narrow='normal'] {
    /* stylelint-disable-next-line primer/spacing */
    padding: var(--stack-padding-normal, 16px);
  }

  &[data-padding='spacious'],
  &[data-padding-narrow='spacious'] {
    /* stylelint-disable-next-line primer/spacing */
    padding: var(--stack-padding-spacious, 24px);
  }

  &[data-direction='horizontal'],
  &[data-direction-narrow='horizontal'] {
    flex-flow: row;
  }

  &[data-direction='vertical'],
  &[data-direction-narrow='vertical'] {
    flex-flow: column;
  }

  &[data-gap='none'],
  &[data-gap-narrow='none'] {
    --stack-gap: var(--stack-gap-none, 0);
  }

  &[data-gap='condensed'],
  &[data-gap-narrow='condensed'] {
    --stack-gap: var(--stack-gap-condensed, 0.5rem);
  }

  &[data-gap='normal'],
  &[data-gap-narrow='normal'] {
    --stack-gap: var(--stack-gap-normal, 1rem);
  }

  &[data-gap='spacious'],
  &[data-gap-narrow='spacious'] {
    --stack-gap: var(--stack-gap-spacious, 1.5rem);
  }

  &[data-align='start'],
  &[data-align-narrow='start'] {
    align-items: flex-start;
  }

  &[data-align='center'],
  &[data-align-narrow='center'] {
    align-items: center;
  }

  &[data-align='end'],
  &[data-align-narrow='end'] {
    align-items: flex-end;
  }

  &[data-align='baseline'],
  &[data-align-narrow='baseline'] {
    align-items: baseline;
  }

  &[data-justify='start'],
  &[data-justify-narrow='start'] {
    justify-content: flex-start;
  }

  &[data-justify='center'],
  &[data-justify-narrow='center'] {
    justify-content: center;
  }

  &[data-justify='end'],
  &[data-justify-narrow='end'] {
    justify-content: flex-end;
  }

  &[data-justify='space-between'],
  &[data-justify-narrow='space-between'] {
    justify-content: space-between;
  }

  &[data-justify='space-evenly'],
  &[data-justify-narrow='space-evenly'] {
    justify-content: space-evenly;
  }

  &[data-wrap='wrap'],
  &[data-wrap-narrow='wrap'] {
    flex-wrap: wrap;
  }

  &[data-wrap='nowrap'],
  &[data-wrap-narrow='nowrap'] {
    flex-wrap: nowrap;
  }

  /* @custom-media --veiwportRange-regular */
  @media (min-width: 48rem) {
    &[data-padding-regular='none'] {
      padding: 0;
    }

    &[data-padding-regular='condensed'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-condensed, 8px);
    }

    &[data-padding-regular='normal'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-normal, 16px);
    }

    &[data-padding-regular='spacious'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-spacious, 24px);
    }

    &[data-direction-regular='horizontal'] {
      flex-flow: row;
    }

    &[data-direction-regular='vertical'] {
      flex-flow: column;
    }

    &[data-gap-regular='none'] {
      --stack-gap: var(--stack-gap-none, 0);
    }

    &[data-gap-regular='condensed'] {
      --stack-gap: var(--stack-gap-condensed, 0.5rem);
    }

    &[data-gap-regular='normal'] {
      --stack-gap: var(--stack-gap-normal, 1rem);
    }

    &[data-gap-regular='spacious'] {
      --stack-gap: var(--stack-gap-spacious, 1.5rem);
    }

    &[data-align-regular='start'] {
      align-items: flex-start;
    }

    &[data-align-regular='center'] {
      align-items: center;
    }

    &[data-align-regular='end'] {
      align-items: flex-end;
    }

    &[data-align-regular='baseline'] {
      align-items: baseline;
    }

    &[data-justify-regular='start'] {
      justify-content: flex-start;
    }

    &[data-justify-regular='center'] {
      justify-content: center;
    }

    &[data-justify-regular='end'] {
      justify-content: flex-end;
    }

    &[data-justify-regular='space-between'] {
      justify-content: space-between;
    }

    &[data-justify-regular='space-evenly'] {
      justify-content: space-evenly;
    }

    &[data-wrap-regular='wrap'] {
      flex-wrap: wrap;
    }

    &[data-wrap-regular='nowrap'] {
      flex-wrap: nowrap;
    }
  }

  /* @custom-media --viewportRange-wide */
  @media (min-width: 87.5rem) {
    &[data-padding-wide='none'] {
      padding: 0;
    }

    &[data-padding-wide='condensed'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-condensed, 8px);
    }

    &[data-padding-wide='normal'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-normal, 16px);
    }

    &[data-padding-wide='spacious'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-spacious, 24px);
    }

    &[data-direction-wide='horizontal'] {
      flex-flow: row;
    }

    &[data-direction-wide='vertical'] {
      flex-flow: column;
    }

    &[data-gap-wide='none'] {
      --stack-gap: var(--stack-gap-none, 0);
    }

    &[data-gap-wide='condensed'] {
      --stack-gap: var(--stack-gap-condensed, 0.5rem);
    }

    &[data-gap-wide='normal'] {
      --stack-gap: var(--stack-gap-normal, 1rem);
    }

    &[data-gap-wide='spacious'] {
      --stack-gap: var(--stack-gap-spacious, 1.5rem);
    }

    &[data-align-wide='start'] {
      align-items: flex-start;
    }

    &[data-align-wide='center'] {
      align-items: center;
    }

    &[data-align-wide='end'] {
      align-items: flex-end;
    }

    &[data-align-wide='baseline'] {
      align-items: baseline;
    }

    &[data-justify-wide='start'] {
      justify-content: flex-start;
    }

    &[data-justify-wide='center'] {
      justify-content: center;
    }

    &[data-justify-wide='end'] {
      justify-content: flex-end;
    }

    &[data-justify-wide='space-between'] {
      justify-content: space-between;
    }

    &[data-justify-wide='space-evenly'] {
      justify-content: space-evenly;
    }

    &[data-wrap-wide='wrap'] {
      flex-wrap: wrap;
    }

    &[data-wrap-wide='nowrap'] {
      flex-wrap: nowrap;
    }
  }
}