.LeftIconWrapper {
  display: flex;
  align-items: center;

  min-width: 20px;
  max-width: 20px;
  margin-right: 8px;
}

.RightContentWrapper {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: flex-end;

  margin-left: 8px;
}

.Wrapper {
  display: block;
}

.Item {
  display: flex;
  align-items: center;

  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding: 0 6px;

  text-decoration: none;

  border-radius: var(--radius-6);
  outline: 0;

  &:where(.active) {
    color: var(--color-text-accent-blue);
    background-color: var(--color-fill-accent-blue);
  }

  &:where(:not(.active)) {
    color: var(--color-text-neutral);

    &:where(&:hover, &:focus-visible) {
      background-color: var(--color-fill-neutral-light);
    }
  }
}