button.DropdownLabel {
  align-items: center;
  background: var(--button-contained-bg);
  border: none;
  border-radius: $unit-2x;
  color: var(--text-secondary);
  display: flex;
  font-size: $font-small;
  gap: $unit-half;
  flex-direction: row;
  justify-content: space-between;
  padding: $unit ($unit * 1.5) $unit $unit-2x;

  div {
    display: flex;
    gap: $unit-half;
  }

  &:hover {
    background: var(--button-contained-bg-hover);
    color: var(--text-primary);
    cursor: pointer;
  }

  .count {
    color: var(--text-tertiary);
    font-weight: $medium;
  }

  & > .icon {
    $diameter: 16px;
    height: $diameter;
    width: $diameter;

    svg {
      path {
        fill: $grey-60;
      }
    }
  }
}

.Dropdown {
  background: var(--button-contained-bg);
  border-radius: $unit;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  padding: $unit;
  min-width: 120px;

  & > span {
    overflow: hidden;

    svg {
      fill: var(--button-contained-bg);
      filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0.18));
    }
  }

  section {
    display: flex;
    flex-direction: row;
    gap: $unit;
  }

  .Group {
    flex: 1 1 0px;
    flex-direction: column;
  }

  .Label {
    color: var(--text-tertiary);
    font-size: $font-small;
    margin-bottom: $unit-half;
    padding: $unit-half 0 $unit $unit-half;
  }
}