:root {
  --user-stage-background-color: var(--color-orange-light);
  --user-stage-line-color: rgba(0, 0, 0, 0.1);

  @include use-responsive-sizing(--user-stage-padding-block, responsive-map(xs 4rem, xl 6rem));
  @include use-responsive-sizing(--user-stage-row-gap, responsive-map(xs 3rem, xl 4rem));
}

.user-stage {
  background-color: var(--user-stage-background-color);
  padding-block: var(--user-stage-padding-block);
}

.user-stage--cyan {
  --user-stage-background-color: var(--color-cyan-light);
}

.user-stage--green {
  --user-stage-background-color: var(--color-green-light);
}

.user-stage--yellow {
  --user-stage-background-color: var(--color-yellow-light);
}

.user-stage--purple {
  --user-stage-background-color: var(--color-purple-light);
}

.user-stage--blue {
  --user-stage-background-color: var(--color-blue-light);
}

.user-stage--red {
  --user-stage-background-color: var(--color-red-light);
}

.user-stage__inner {
  display: grid;
  row-gap: var(--user-stage-row-gap);

  @include use-container();
}

.user-stage__user {
  align-items: center;
  display: flex;
  gap: 2rem;
}

.user-stage__user-logo {
  flex-shrink: 0;
  max-inline-size: 20rem;
  min-inline-size: 10rem;
}

.user-stage__user-image {
  block-size: 9.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 9.2rem;
  min-inline-size: 9.2rem;
  object-fit: cover;
  overflow: hidden;
}

.user-stage__user-headline {
  --headline-font-size: 2.2rem;
}

.user-stage__menu {
  --focus-outline-offset: 5px;

  border-block-start: 0.2rem solid var(--user-stage-line-color);
  column-gap: 3rem;
  display: flex;
  flex-direction: column;
  padding-block-start: var(--user-stage-row-gap);
  row-gap: 1.5rem;

  @include mq($from: m) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.user-stage__menu-item {
  --icon-button-background-color-active: transparent;
  --icon-button-background-color: transparent;
  --icon-button-border-color-active: transparent;
  --icon-button-border-color: transparent;
  --icon-button-count-background-color: var(--color-midnight);
  --icon-button-count-color: var(--color-white);
  --icon-button-font-weight: var(--font-weight-regular);
  --icon-button-gap: 1.5rem;
  --icon-button-icon-color-active: var(--color-midnight);
  --icon-button-icon-color: var(--color-midnight);
  --icon-button-icon-size: 3rem;
  --icon-button-size: 3rem;
  --icon-button-underline-focus-color: var(--color-midnight);
  --icon-button-underline-height: 2px;

  display: block;
}