.DropdownLabel {
  align-items: center;
  background: $grey-90;
  border: none;
  border-radius: $unit * 2;
  color: $grey-40;
  display: flex;
  gap: calc($unit / 2);
  flex-direction: row;
  padding: ($unit) ($unit * 2);

  &:hover {
    background: $grey-80;
    color: $grey-00;
    cursor: pointer;
  }

  .count {
    color: $grey-60;
    font-weight: $medium;
  }

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

    svg {
      transform: scale(0.85);

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

.Dropdown {
  background: white;
  border-radius: $unit;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: calc($unit / 2);
  padding: $unit;
  min-width: 120px;

  & > span {
    overflow: hidden;

    svg {
      fill: white;
      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: $grey-60;
    font-size: $font-small;
    margin-bottom: calc($unit / 2);
    padding-left: calc($unit / 2);
  }
}